I am trying to create a calendar using the grid with only 7 columns. I would like to have these 7 columns evenly spaced and fit the entire row. Currently, the 7 columns does not add up to 12 and I get 12 columns with 5 empty. Is there a way in Bootstrap 3 to get all 7 spread across the row?
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
由 
翻译强力驱动
翻译强力驱动问题:
回答1:
Your best bet is probably to create your own custom column class. Since you want a colum that spans 1/7th the width of it's parent, use width:14.285%; (100 divided by 7 = 14.285...).
DEMO: http://www.bootply.com/uakh14tkuX
CSS
.col-day{ width:14.285%; border:1px solid grey; float:left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }HTML
<div class="container"> <div class="row bg-success"> <div class="col-day">Sun</div> <div class="col-day">Mon</div> <div class="col-day">Tue</div> <div class="col-day">Wed</div> <div class="col-day">Th</div> <div class="col-day">Fr</div> <div class="col-day">Sat</div> <div class="col-day">Sun</div> <div class="col-day">Mon</div> <div class="col-day">Tue</div> <div class="col-day">Wed</div> <div class="col-day">Th</div> <div class="col-day">Fr</div> <div class="col-day">Sat</div> </div> </div>In the CSS section, float, position, min-height and the paddings are the same as any other bootstrap col-class. Width and border are the only truly custom aspects. But you'll also want to consider what happens on different sized devices - this solution is NOT responsive the way combined col-classes are...
回答2:
Short answer: not really maybe?
Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.The number 12 was chosen due to high versatility (you can have: 1,2,3,4,6 or 12 columns), but there is always some caveat to such solutions: they require some conformity to its standards.
Now, what happens when you create 7 divs like this: <div class="col-md-1">? I've done a quick test and well, I've got 7 columns. Of course they take only 7/12 of my container width - so if that's acceptable, then you can roll with it.
If not, you'll either have to use your own solution (either leveraging existing bootstrap classes or start from blank), modify bootstrap (possible, but I'd advice against, because it creates problems for future maintenability), or change your design. Or maybe just use some other component/template?
回答3:
Why not double 7 to 14? It's much simpler to keep it an even number. That way you can create a layout that appears to add up to 7 columns. So for instance if you wanted a col-3 and col-4 layout, you would simply do col-6 and col-8. For a calendar, that would mean each day would get a col-2 class.
Also check out https://github.com/zirafa/bootstrap-grid-only which might be easier to understand than Bootstrap's mixins, though you can always just go to the Bootstrap customize page and enter in the number of columns you want: http://getbootstrap.com/customize/