Bootstrap列的嵌套不正确

我试图用Bootstrap制作一个简单的Advent日历（'tis the season）。我在每周的7天内每行嵌套7列。Bootstrap列的嵌套不正确

<div class="container-fluid"> 
    <div class="row title"> 
     <div class="col-xs-12"><p>Advent Calendar</p></div> 
    </div> 
    <div class="row weekdays"> 
     <div class="col-xs-1"><p>Mon</p></div> 
     ... 
     <div class="col-xs-1"><p>Sun</p></div> 
    </div> 

    <div class="row dates"> 
     <div class="col-xs-1"><p>30</p></div> 
     <div class="col-xs-1"><p>1</p></div> 
     ... 
     <div class="col-xs-1"><p>6</p></div> 
    </div> 
</div>

查看this fidlle的结果。

不幸的是，列利用的总大小是7/12，而不是12/12：它们没有使用视口的全部宽度。不是bootstrap应该照顾的比例？我怎样才能让他们使用100％的宽度？

来源

2015-11-29 Queder

如果您使用的是Bootstrap [v3.0]（http://bootstrapdocs.com/v3.0.0/docs/css/#overview-container）（就像您在jsFiddle中一样），“container-fluid”在该版本中并不存在，只是你知道的。 – vanburen

使用这个工具在网格系统部分自定义您的引导 http://getbootstrap.com/customize/#grid-system

可以设置14 @grid-columns而不是12，然后侑定制的引导将是14列，然后在你的HTML代码中使用col-xs-2代替col-xs-1对于每一天，您的日历都有完整的页面宽度。

来源

2015-11-29 01:16:00 Omid

Bootstrap列的嵌套不正确

回答

相关问题