Bootstrap 3：如何使用自定义容器宽度？答案

【问题标题】：Bootstrap 3: How to use custom container width?Bootstrap 3：如何使用自定义容器宽度？
【发布时间】：2014-07-13 21:24:54
【问题描述】：

在 Bootstrap 3 中，大型设备的容器宽度设置为 1170px。我想将其更改为更高的值，例如 1500px。我可以简单地将.container 的宽度更改为 1500px 还是会对其他元素产生副作用？我是否还必须更改中小型设备的容器宽度？如何确保它不会破坏我的设计？

【问题讨论】：

添加自定义 CSS 文件，覆盖默认实现并亲自尝试。请记住，您需要专注于特定的媒体查询，否则您将更改每个屏幕上每个实例的大小，并使您的选择器足够具体以覆盖默认的引导行为。

【解决方案1】：

绝对不要更改.container 内联宽度，因为这会在较小的屏幕上截断。最简单的方法是将其添加到您的 CSS：

@media (min-width: 1500px) {
  .container {
    width: 1470px;
  }
}

当屏幕为 1500 像素及以上时，您的容器将填满它，但它不会对 1200 像素和 1500 像素或更小的屏幕/浏览器窗口产生任何影响。

ps - 我的 Bootply 设置为 ~1400px，因为这是我的 MBPr 的宽度 - 非常常见的最大宽度。

【讨论】：

【解决方案2】：

直接从他们的主网站http://getbootstrap.com/customize/#container-sizes 下载引导程序并根据需要对其进行自定义。我为您提供的 url 将您直接带到容器大小部分，您所要做的就是更改它，然后下载引导文件。

【讨论】：

【解决方案3】：

从GitHub下载一份Bootstrap并修改variables.less上的这一行

@container-large-desktop:      ((1140px + @grid-gutter-width));

根据你的喜好：

@container-large-desktop:      ((1500px + @grid-gutter-width));

如果您不熟悉 LESS，请阅读它 here 并使用 LESS 编译器（例如 Koala）编译 bootstrap.css 文件

【讨论】：