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;
  }
}

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

在Bootstrap 3.0.2中测试

Answer 2

首先考虑小网格，请参阅：http://getbootstrap.com/css/#grid-options。最大容器宽度为750像素可能对你来说很小（也读为：Why does Bootstrap 3 force the container width to certain sizes?）

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

@media（min-width：768px）{ 。容器 { 最大宽度：750px; } }

其次也读过这个问题：Bootstrap 3 - 940px width grid?，可能重复吗？

12 x 60 = 720px列，11 x 20 = 220px

网格两侧也会有一个20px的装订线，所以220 + 720 + 40会产生980px

有'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。

Answer 3

最好的选择是使用原始LESS版本的bootstrap（从github获取）。

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

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

// 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。

Answer 5

如果不起作用，请使用＆＃34;！重要＆＃34;

@media（min-width：1200px）{ 。容器 { 宽度：970px ！important; } }