Question

为了学习Bootstrap，我正在复制http://www.newsweek.com/（尽可能使用vanilla 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*/
    }
}

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

Answer 2

在最新的Bootstrap 4.4中，您可以使用：

if ($result = odbc_fetch_array($rs)) {
    // output the table headers here
    do {
        // output the row data
    } while ($result = odbc_fetch_array($rs));
}
else {
    // no data to output
}

这将从<div class="container-xl"> <div class="row"> ... </div> </div>（“容器流体”）开始，然后在到达“ xl”断点（通常为1200px）时切换到“容器”。

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

2 个答案: