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

Question

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

Answer 1

从GitHub下载Bootstrap副本并修改variables.less上的此行

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

根据自己的喜好：

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

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

Answer 2

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

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

当屏幕为1500px及以上时，您的容器将填充它，但它对1200px和1500px之间或更小的屏幕/浏览器窗口没有任何区别。

这是Bootply

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

Answer 3

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