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

概述为了学习Bootstrap,我正在复制 http://www.newsweek.com/(尽可能使用vanilla Bootstrap)和顶栏(登录,注册等)让我陷入困境.对于一个大型视口,它似乎是一个简单的容器/行,但是当它调整大小并进入中等视口时,而不是打破它似乎转换到容器流体/行流体. 我在Codepen中设置了一个测试人员,每个可能的容器和行组合都是流动的,响应独立和相关的(我知道)可以弄 为了学习bootstrap,我正在复制 http://www.newsweek.com/(尽可能使用vanilla bootstrap)和顶栏(登录,注册等)让我陷入困境.对于一个大型视口,它似乎是一个简单的容器/行,但是当它调整大小并进入中等视口时,而不是打破它似乎转换到容器流体/行流体.

我在Codepen中设置了一个测试人员,每个可能的容器和行组合都是流动的,响应独立和相关的(我知道)可以弄清楚发生了什么并进行了一些实验：

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

在1200px视口宽度处(如标尺下方所示),

<div >  <div >    ...  </div></div>

和

<div >  <div >    ...  </div></div>

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

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

解决方法 添加媒体查询！使用容器类,然后执行类似这样的 *** 作(假设您的容器具有ID #myContainer)：

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

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

总结

以上是内存溢出为你收集整理的html – 可以在视口断点处将容器/行转换为容器流体/行流体？全部内容，希望文章能够帮你解决html – 可以在视口断点处将容器/行转换为容器流体/行流体？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。