更改 Bootstrap 容器的最大宽度答案

【问题标题】：Changing the max width of Bootstrap container更改 Bootstrap 容器的最大宽度
【发布时间】：2018-06-30 22:28:56
【问题描述】：

我正在使用 Bootstrap 4 创建登录页面。使用 Bootstrap 的容器的最大宽度似乎是 1140px？我的显示器现在是 1920px。我是否必须将 bootstrap 的值覆盖为 1920px 才能使其支持该尺寸的显示器？

这是我正在使用的代码，我想将登录表单的内容居中（代码仅用于测试以使内容居中）：

<body>
<div class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
      <h1 class="display-3">Hello, world!</h1>
    </div>
</div>
</body>

甚至对于更大的显示器，我是否应该将尺寸增加到高得离谱的尺寸（例如 999999 像素）以支持它们？

感谢您的任何反馈！

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

只需使用container-fluid 类而不是container 即可获得全宽。

在您的情况下，一个更好的选择是像这样使用流体 jumbotron：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

上面带有container 类的流畅大屏幕是一个不错的选择，因为它可以确保宽 4K 屏幕上的用户不会对你生气。 :-)

【讨论】：

啊，谢谢！那我什么时候应该使用 .container 而不是 .container-fluid？
在使用 container-fluid 时要非常小心，因为在宽 4K 屏幕上，如果你做错了事情，人们会很生气。因此：始终在开发工具中测试（切换到移动视图并显示 4K 屏幕）它在 4K 宽屏幕上的实际外观。
说了这么多，我认为带有container 的流体大屏幕可能是你想要的。检查我的 sn-p。
基本上，container-fluid 仅在您希望背景图像或其他一些非必要内容填满整个屏幕宽度的情况下才有用。但不要将任何导航元素或任何其他文本内容放入全宽，因为在巨大的 4K 宽屏幕上看起来很糟糕。
如果您在此处查看我对这个问题的回答：stackoverflow.com/questions/48374693/…，您会看到另一个使用 container-fluid 类实际上是有意义的情况。在这种情况下，用户希望深灰色 (bg-secondary) 背景跨越整个页面宽度。