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

Question

为了学习Bootstrap，我正在复制http://www.newsweek.com/(尽可能使用香草Bootstrap)和顶部栏(登录，注册等)让我感到困难。有了大的视口，它似乎是一个简单的容器/行，但当它调整大小并达到中等视口时，而不是打破它似乎过渡到容器流体/行流体。

我在Codepen中设置了一个测试器，其中包含容器和行流体和响应独立和相互依赖的每种可能组合(我知道)，以弄清楚发生了什么并进行了一些实验:

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

当视口宽度为1200px时(如标尺下方所示)，

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

和

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

…都是相同的。《新闻周刊》网站似乎就是这么做的，但我自己也没办法做到这一点，除非给这个栏写两次不同可见性的代码。

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

Answer 1

添加媒体查询!使用容器类，然后执行如下操作(假设容器的id为#myContainer):

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

宽度属性几乎是容器和容器流体之间唯一的真正区别，因此这只是使您的容器模拟容器流体。

Answer 2

在最新的Bootstrap 4.4中，你可以使用:

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

这将从width: 100% ('container-fluid')开始，然后在达到'xl'断点(通常为1200px)时切换到'container'。