twitter-bootstrap-3 – Bootstrap 3 – 集合箱宽度为940px最大桌面?

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap-3 – Bootstrap 3 – 集合箱宽度为940px最大桌面?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用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并重新编译引导程序。

猜你在找的Bootstrap相关文章