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液体布局的更多信息 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-fluid-layout.php

Answer 3

在使用sass的引导程序版本4中：

$container-max-widths: (
  xl: 1200px
);

Answer 4

您可以在以下位置更改Bootstrap自定义页面上的容器宽度：

http://getbootstrap.com/customize/

在容器大小下，将@ container-large-desktop更改为所需大小。记得考虑到排水沟。

Answer 5

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

$container-max-widths: (
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Answer 6

我发现自己最好，最简单的解决方案：

您使用由.container-fluid插入的.container，并在CSS中添加@media的{​​{1}}请求，该请求比要求的要高一点：

min-width

结束享受！

Answer 7

我发现最简单的方法是在您的 site.css 文件中将 .container-fluid 设置为 auto 以进行自定义站点 css 设置*：

.container-fluid {
width: 1400px;

}

不过在大多数情况下我更喜欢自动：

    .container-fluid {
width: auto;

}

然后使用容器流体类而不是容器。

*创建此文件是您需要为您的网站进行自定义的最佳做法。这样，原始 css 库保持不变，当您更新它们时，您的自定义设置也保持不变。