我正在使用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 - 但它不起作用。
答案 0 :(得分：90)
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中测试
答案 1 :(得分：16)
首先考虑小网格，请参阅：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：
.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。
答案 2 :(得分：6)
最好的选择是使用原始LESS版本的bootstrap（从github获取）。
打开variables.less并查找//媒体查询断点
找到此代码并更改断点值：
// Large screen / wide desktop
@screen-lg: 1200px; // change this
@screen-lg-desktop: @screen-lg;
例如，将其更改为9999px，这将阻止到达断点，因此您的站点将始终加载具有940px容器的先前媒体查询
答案 3 :(得分：5)
如果您不想编译引导程序，请复制以下内容并将其插入自定义css文件中。不建议更改原始引导程序css文件。此外，如果您从cdn加载它，您将无法修改引导原始css。
将其粘贴到自定义css文件中：
@media (min-width:992px)
{
.container{width:960px}
}
@media (min-width:1200px)
{
.container{width:960px}
}
我在这里将容器设置为960px，以便能够容纳它，并将其余介质尺寸保持为默认值。您可以将此问题设置为940px。
答案 4 :(得分：1)
如果不起作用，请使用＆＃34;！重要＆＃34;
@media（min-width：1200px）{ 。容器 { 宽度：970px ！important; } }