首页 文章

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

提问于
浏览 次
5

为了学习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>

......是完全相同的 . 这似乎是“新闻周刊”网站正在做的事情，但是如果没有用不同的可见性对条形码进行两次编码，我找不到自己做的方法 .

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

html css twitter-bootstrap css3 twitter-bootstrap-3

1 回答

  • 6

    添加媒体查询！使用容器类，然后执行类似这样的操作（假设您的容器具有id #myContainer）：

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

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

    回复于

相关问题