可以在视口断点将容器/行转换为容器流体/行流体吗？

Question

出于学习 Bootstrap 的目的，我正在复制 http://www.newsweek.com/（尽可能使用原版 Bootstrap）并且顶部栏（登录、注册等）让我受阻。对于大视口，它似乎是一个简单的容器/行，但当它调整大小并进入中等视口时，它似乎不会中断，而是过渡到容器流体/行流体。

我在 Codepen 中设置了一个测试器，其中包含容器和行的所有可能组合，并且响应独立和相互依赖（据我所知），以弄清楚发生了什么并进行了一些实验：

http://codepen.io/spectre6000/full/vOzeBB/

视口宽度为 1200 像素（如标尺下方所示），

<div class="container">
  <div class="row">
    ...
  </div>
</div>

和

<div class="container-fluid">
  <div class="row-fluid">
    ...
  </div>
</div>

...是相同的。似乎这就是新闻周刊网站正在做的事情，但如果不使用不同的可见性对栏进行两次编码，我无法找到自己的方法。

如何在断点处从一个容器/行设置切换到另一个？

Answer 1

在最新的Bootstrap 4.4你可以使用：

<div class="container-xl">
  <div class="row">
    ...
  </div>
</div>

这将从width: 100% ('container-fluid') 开始，然后在到达“xl”断点（通常为 1200 像素）时切换到“容器”。

Answer 2

添加媒体查询！使用容器类，然后执行以下操作（假设您的容器的 id 为 #myContainer）：

@media (max-width: 1200px) {
    #myContainer {
        width: 97.5%; /*this gives it the precise width to match the Bootstrap defaults*/
    }
}

宽度属性几乎是容器和容器流体之间唯一真正的区别，所以这只会让你的容器模拟容器流体。