Bootstrap:如何将容器的宽度更改为1400px？

Question

我需要在Bootstrap 3到1400px中使用自定义容器.我如何计算网格列宽度和@ grid-gutter-width？怎么做？

谢谢.

Answer 1

如果您使用bootstrap SASS端口,您可以通过更改轻松完成_bootstrap-variables.scss.

在_bootstrap-variables.scss寻找$container-large-desktop和改变它的价值(1370px + $grid-gutter-width).

默认$grid-gutter-width值为30像素.你也可以改变它.
如果您更改,$grid-gutter-width则$container-large-desktop相应地更改以获得容器大小1400px.

要知道如何使用引导程序SASS检查出来:https://github.com/twbs/bootstrap-sass

Answer 2

最好使用Bootstrap流畅布局，例如：

的CSS

.wrapper{
    width: 1400px;
    margin: 0 auto;
}

的HTML

<div class="wrapper">
    <div class="container-fluid"></div>
</div>

这真的很糟糕。为什么还要使用 Bootstrap？如果您打算这样做，只需制定一个 CSS 规则，即 container-fluid 的最大宽度为 1400 像素，它会执行相同的操作，而无需在任何地方添加额外的 HTML。 (3认同)

Answer 3

要更改核心的容器大小，如果使用bootstrap scss，则必须再次声明bootstrap容器变量。

$ container-max-widths：（
  md：720px，
  lg：960px，
  xl：1140px
）;

Answer 4

我发现自己的最佳和最简单的解决方案：

您在 CSS 中使用.container-fluid代替.container和添加@media请求，min-width但比要求高一点：

@media (min-width: 1405px) {
  .container-fluid{
    width: 1400px;
  }
}

享受！