Bootstrap 3 - 将桌面的容器宽度设置为最大 940 像素？答案

【问题标题】：Bootstrap 3 - Set Container Width to 940px Maximum for Desktops?Bootstrap 3 - 将桌面的容器宽度设置为最大 940 像素？
【发布时间】：2013-10-26 03:35:15
【问题描述】：

我正在使用 Twitter Bootstrap 3 向网站添加一个全新的部分，但是对于桌面，容器的总宽度不能超过 940 像素 - 因为它会丢弃页眉和页脚 {includes}。

所以 940 像素适用于 12 x 60 = 720 像素的列和 11 x 20 = 220 像素的排水沟。很公平，但是如何将这些输入到 Bootstrap 3 中，因为“自定义”部分中没有“@ColumnWidth”字段/设置？

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

【问题讨论】：

标签： twitter-bootstrap-3

【解决方案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;
  }
}

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

在 Bootstrap 3.0.2 中测试

【讨论】：

当我需要在单个 css 文件中声明所有内容时，例如在 CodePen 中，我该怎么做？即使使用!important 标签，它似乎也不起作用。
如果所有内容都存在于一个文件中，我相信您只需确保我上面为custom.css 概述的定义位于非常底部文件。这应该确保它们最后得到应用。未测试，YMMV。
不幸的是，我在 CodePen 中对其进行了测试，但没有成功。我会努力解决的，谢谢你的回复。
我认为应该是 "max-width: 970px;"
@FrankKoehl 是的。感谢您的链接。

【解决方案2】：

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

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

@media（最小宽度：768px）{ 。容器 { 最大宽度：750px； } }

第二次阅读这个问题：Bootstrap 3 - 940px width grid?，可能重复吗？

12 x 60 = 720 像素的列和 11 x 20 = 220 像素

网格两边也会有 20px 的间距，所以 220 + 720 + 40 等于 980px

没有'@ColumnWidth'

您的列宽度将根据您在 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 并重新编译引导程序。

【讨论】：

小网格对于这个项目来说太小了，因为需要达到与网站其他部分相同的 940 像素。您对“重复”的引用 - 我在发布我的问题之前尝试过这个，但它不能解决问题？谢谢。
嗨 - 这里有点困惑！？你已经写了两次“container-desktop”，一次的值为 940px，另一次没有？
是的，您必须将@container-large-desktop 设置为与`@container-desktop` 相同的值，同时设置为940px 或@container-large-desktop: @container-desktop。这意味着与@container-large-desktop = @container-desktop 相同
我已经尝试将 'container-desktop' 和 'container-large-desktop' 都设置为 940px - 但它不起作用。我想知道“媒体查询断点”是否有影响？？
感谢您对此的帮助 - 我发现我的模板 style.css 覆盖了 .container 宽度，因为链接位于“”中的 bootstrap.css 上方。跨度>

【解决方案3】：

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

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

找到这段代码并更改断点值：

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

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

【讨论】：

【解决方案4】：

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

将此粘贴到您的自定义 css 文件中：

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

我在这里将我的容器设置为 960 像素以容纳任何可以容纳它的东西，并将其余媒体尺寸保持为默认值。对于这个问题，您可以将其设置为 940px。

【讨论】：

【解决方案5】：

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

@media（最小宽度：1200px）{ 。容器 { 宽度：970px !important; } }

【讨论】：