Bootstrap 3 - 将桌面容器的容量宽度设置为940px？

Question

我正在使用Twitter Bootstrap 3向网站添加一个全新的部分,但是对于桌面来说,容器总共不能超过940px - 因为它会抛出页眉和页脚{includes}.

所以940px的列为12 x 60 = 720px,而排水沟为11 x 20 = 220px.很公平,但是你如何将它们输入到Bootstrap 3中,因为Customize部分中有'no'@ColumnWidth字段/设置？

我试过将@ container-lg-desktop和@ container-desktop都设置为940px - 但它不起作用.

Answer 1

Bootstrap 3中有一个更简单的解决方案(IMO),它不需要您编译任何自定义LESS.您只需在"层叠样式表"中利用级联.

像这样设置你的CSS加载......

<link type="text/css" rel="stylesheet" href="/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/css/custom.css" />

/css/custom.css您的独特风格定义在哪里？在该文件中,添加以下定义...

@media (min-width: 1200px) {
  .container {
    width: 970px;
  }
}

width: 1170px当视口为1200px或更大时,这将覆盖Bootstrap的默认设置.

在Bootstrap 3.0.2中测试

Answer 2

首先考虑小网格,请参阅:http://getbootstrap.com/css/#grid-options.最大容器宽度为750像素可能会对您来说很小(另请阅读:为什么Bootstrap 3会将容器宽度强制为特定尺寸？)

使用小网格时使用媒体查询来设置最大容器宽度:

@media(min-width:768px){.container {max-width:750px; }}

第二个也读了这个问题:Bootstrap 3 - 940px宽度网格？,可能重复？

列的12 x 60 = 720px,11 x 20 = 220px

网格两侧还有一个20px的装订线,所以220 + 720 + 40可以达到980px

有'不'@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和重新编译引导程序.

Answer 3

最好的选择是使用原始LESS版本的bootstrap(从github获取).

打开variables.less并查找// Media查询断点

找到此代码并更改断点值:

// Large screen / wide desktop
@screen-lg:                  1200px; // change this
@screen-lg-desktop:          @screen-lg;

例如,将其更改为9999px,这将阻止到达断点,因此您的站点将始终加载具有940px容器的先前媒体查询

Answer 4

如果您不希望编译引导程序,请复制以下内容并将其插入自定义css文件中.不建议更改原始引导程序css文件.此外,如果从cdn加载它,您将无法修改引导原始css.

将其粘贴到自定义css文件中:

@media (min-width:992px)
    {
        .container{width:960px}
    }
@media (min-width:1200px)
    {
        .container{width:960px}
    }

我在这里将容器设置为960px,以便能够容纳它,并将其余介质尺寸保持为默认值.您可以将此问题设置为940px.