基于Twitter Bootstrap的响应式设计中的流体或固定网格系统
我对twitter引导网格中的各种选项感到困惑，以及它们如何结合在一起。
首先，你可以有一个普通的固定container或container-fluid 。
那么任何一个人都可以包括一个普通的row ，或者一个流体排， row-fluid 。 也就是说，你可以有一个固定容器，一个流体排，或一个容器流体......固定排？
最重要的是，您可以包含“响应式”媒体查询，或不包括。
我对这些事情如何相互作用感到困惑。 但让我们从一个明显的例子开始。
在示例页面上，有一个固定网格和流体网格的例子
但是，在我的浏览器中，在该示例页面上 - 两个网格的行为都是相同的。 也许是因为示例页面使用可选的响应式媒体查询？ 在这两个网格示例中，如果我开始逐渐缩小浏览器窗口，则网格元素不会逐渐变窄 - 一旦达到某个（响应）边界宽度，它们将捕捉到更小的大小，并再次以更高的边界宽度捕捉。 但是普通的“固定”例子和“流体”例子在这里表现完全相同 - 那么差异究竟是什么？
当你在固定宽度和流体宽度之间做出决定时，你需要考虑整个页面。 一般来说，你想选择一个或另一个，但不是两个。 您在问题中列出的示例事实上在相同的固定宽度页面中。 换句话说，脚手架页面使用固定宽度的布局。 脚手架页面上的固定网格和流体网格不是示例，而是用于实现固定和流体宽度布局的文档。
适当的固定宽度示例在这里。 适当的流体宽度示例在这里。
观察固定宽度示例时，如果浏览器宽度大于960像素，则不应看到内容更改大小。 这是页面的最大（固定）宽度。 固定宽度设计中的媒体查询将指定特定样式的最小宽度。 当您缩小浏览器窗口并查看布局捕捉到不同的大小时，您会看到这一点。
相反，流体宽度布局总是会延伸到适合您的浏览器窗口，无论它有多宽。 媒体查询指示样式何时更改，但容器的宽度始终是浏览器窗口的百分比（而不是固定数量的像素）。
“响应式”媒体查询已准备就绪。 您只需要决定是否要为页面使用固定宽度或流体宽度布局。
此前，在引导2，您必须使用row-fluid的液体容器内，并row固定的容器内。 随着bootstrap 3的引入， row-fluid被移除， 不再使用它 。
编辑 ：根据评论，一些jsFiddles为：
这些小提琴完全无Bootstrap，基于纯CSS媒体查询，这使得它们成为一个很好的起点，对于任何愿意在不使用Twitter Bootstrap的情况下制作类似解决方案的人来说。
有趣的讨论。 我也在问自己这个问题。 流体和固定之间的主要区别在于固定布局根据网站的整个布局（视口）具有固定的宽度。 如果您的视窗宽度为960像素，则每个柱面的固定宽度不会改变。
流体布局表现不同。 想象一下，您已将主布局的宽度设置为100％宽度。 现在每列只会被计算为它的相对大小（即25％），并且会随着浏览器的大小调整而变大。 因此，根据您的布局目的，您可以选择布局的行为方式。
这里有一篇关于流体与弯曲的好文章。
来源 - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
优点
缺点
上一篇: Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap