首先,你可以有一个普通的固定容器,或一个容器流体。
然后,可以包括普通行或流体行,行流体。也就是说,你可以有一个固定的容器,一个流体行,或一个容器流体…一个固定的行?
我很困惑这些东西如何相互作用。但是让我们从一个明显的例子开始。
在the examples page本身,有一个作为一个例子,一个fixed grid和fluid grid
但是,在我的浏览器中,在该示例页面本身 – 两个网格行为相同。也许因为示例页面使用可选的响应式媒体查询?在两个网格示例中,如果我开始逐渐缩小我的浏览器窗口,网格元素不会逐渐变窄 – 一旦达到某个(响应)边界宽度,它们捕获到较小的大小,并再次在更大的边界宽度。但是普通的“固定”示例和“流动”示例在此处表现完全相同 – 所以什么是区别?
解决方法
适当的固定宽度示例为here。
适当的流体宽度示例为here。
当观察固定宽度示例时,当您的浏览器大于960像素宽时,您不应该看到内容更改大小。这是页面的最大(固定)宽度。固定宽度设计中的媒体查询将指定特定样式的最小宽度。当您缩小浏览器窗口并看到布局捕捉到不同的大小时,您会看到这个动作。
相反,流体宽度布局将总是伸展到适合您的浏览器窗口,无论它有多宽。媒体查询指示样式何时更改,但容器的宽度始终是浏览器窗口的百分比(而不是固定的像素数)。
“响应”媒体查询都准备好了。您只需要决定是否要为页面使用固定宽度或流体宽度布局。
以前,在bootstrap 2中,您必须在流体容器中使用行流,在固定容器中使用行。随着bootstrap 3的引入,行流体被删除,不再使用它。
编辑:根据评论,一些jsFiddles:
> fluid non-responsive layout,
> fluid responsive layout,
> fixed non-responsive layout,
> fixed responsive layout。
这些fiddles是完全无Bootstrap的,基于纯CSS媒体查询,这使得他们是一个很好的起点,任何人愿意制作类似的解决方案,而不使用Twitter Bootstrap。