我使用Twitter Bootstrap 3为一个网站添加了一个全新的部分,但是容器不能超过940px的桌面,因为它会抛出的页眉和页脚{includes}。
所以940px工作在12 x 60 = 720px的列和11 x 20 = 220px的水槽。公平的,但你如何输入这些到Bootstrap 3,因为在自定义部分中没有’@ColumnWidth字段/设置?
我试图通过将@ container-lg-desktop和@ container-desktop都设置为940px – 但它不工作。
解决方法
首先考虑小网格,参见:
http://getbootstrap.com/css/#grid-options.最大容器宽度750像素可能会为你小(也读作:
Why does Bootstrap 3 force the container width to certain sizes?)
当使用小网格使用媒体查询设置最大容器宽度:
@media(min-width:768px){
。容器 {
max-width:750px;
}}
}}
第二也读这个问题:Bootstrap 3 – 940px width grid?,可能重复?
12 x 60 = 720px for the columns and 11 x 20 = 220px
在网格的两边也有一个20px的水槽,所以220 720 40使980px
there is ‘no’ @ColumnWidth
你colums的宽度将会根据你在variables.less中的设置动态计算。
你可以设置@ grid-columns和@ grid-gutter-width。在mixins.less中,列的宽度将通过grid.less设置为百分比:
.calc-grid(@index,@class,@type) when (@type = width) { .col-@{class}-@{index} { width: percentage((@index / @grid-columns)); } }
更新将@ grid-gutter-width设置为20px; @ container-desktop:940px; @ container-large-desktop:@ container-desktop并重新编译引导程序。