Twitter bootstrap 3 Bootstrap 3-将桌面的容器宽度设置为最大940px？

我正在使用TwitterBootstrap3为一个网站添加一个全新的部分，但是对于桌面来说，容器的总宽度不能超过940px，因为它会抛出页眉和页脚{includes}

因此，940px的计算结果是12 x 60=720px的柱子和11 x 20=220px的排水沟。很公平，但是如何将这些输入到Bootstrap3中，因为在自定义部分中没有'no'@ColumnWidth字段/设置

---

我曾尝试将@容器LG桌面和@容器桌面设置为940px但不起作用。

首先考虑小网格，参见：750像素的最大容器宽度可能会对您来说太小（另请阅读：）

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

@介质（最小宽度：768px）{ .集装箱{ 最大宽度：750px； } }

第二个问题：可能重复吗

色谱柱为12 x 60=720px，色谱柱为11 x 20=220px

电网两侧也将有一个20px的排水沟，因此220+720+40等于980px

ColumnWidth中没有“no”

将根据variables.less中的设置动态计算柱宽。 您可以设置

@格线列

和

@格线槽宽度

。列的宽度将通过mixins.less中的grid.less设置为百分比：

.calc-grid(@index, @class, @type) when (@type = width) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}

更新

---

将网格边沟宽度设置为20px@容器桌面：940px@容器大桌面：@container desktop并重新编译引导程序。

在引导程序3中有一个简单得多的解决方案（IMO），它不需要编译任何自定义的小程序。您只需利用“级联样式表”中的级联即可

像这样设置CSS加载

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

当视口为1200px或更大时，这将覆盖引导的默认

宽度：1170px

设置

---

在Bootstrap 3.0.2中测试，最好的选择是使用原始版本的Bootstrap（从github获得）

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

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

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

---

例如，将其更改为9999px，这将阻止到达断点，因此您的站点将始终加载上一个包含940px容器的媒体查询。如果您不希望编译引导，请复制以下内容并将其插入自定义css文件中。不建议更改原始引导css文件。此外，如果从cdn加载引导原始css，则无法修改它

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

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

---

我在这里设置我的容器为960px，任何可以容纳它的东西，并将剩余的媒体大小保持为默认值。您可以为此问题将其设置为940px。

如果不起作用，请使用“！重要信息”

@介质（最小宽度：1200px）{ .集装箱{ 宽度：970px！重要； }

---

}

对于本项目来说，小电网太小，需要达到940px，与现场其他部分相同。您对“重复”的引用-我在发布问题之前尝试过这个，但它不能解决问题？你好，这里有点混乱！？“container desktop”写入了两次，一个值为940px，另一个值为940px？是的，您必须将

@container large desktop

设置为与“container desktop”相同的值，两者都设置为940px或

@container large desktop:@container desktop

。这意味着与

@container-large-desktop

=

@container-desktop

相同，我已经尝试将“container-desktop”和“container-large-desktop”都设置为940px，但不起作用。我想知道“媒体查询断点”是否有影响？？感谢您在这方面的帮助-我发现我的template style.css超出了.container的宽度，因为链接位于“”中的bootstrap.css之上。当我需要在单个css文件中声明所有内容时，例如在CodePen中，我该如何做？即使使用

，它似乎也不起作用！重要的

tag。如果所有内容都存在于一个文件中，我相信您只需确保我在上面为

custom.css

概述的定义位于文件的最底部，就可以让它正常工作。这将确保它们最后得到应用。没有测试，YMMV。不幸的是，我在代码笔中测试了它，但没有成功。我会想办法的，谢谢你的回答。我想应该是“最大宽度：970px；”@FrankKoehl你说得对。谢谢你的链接。

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