响应式设计的流动或固定网格系统，基于 Twitter Bootstrap

当您在固定宽度和流动宽度之间做出决定时，您需要考虑您的整个页面。通常，您想选择其中之一，但不能同时选择两者。实际上，您在问题中列出的示例在同一个固定宽度页面中。换句话说，Scaffolding 页面使用的是固定宽度的布局。 Scaffolding 页面上的 fixed grid 和 fluid grid 并非示例，而是用于实现固定宽度和可变宽度布局的文档。

正确的固定宽度示例是 here。正确的流体宽度示例是 here。

在观察固定宽度示例时，当您的浏览器宽度大于 960 像素时，您不应该看到内容的大小发生变化。这是页面的最大（固定）宽度。固定宽度设计中的媒体查询将指定特定样式的最小宽度。当您缩小浏览器窗口并看到布局对齐到不同的大小时，您将看到这一点。

相反，流体宽度布局将始终拉伸以适应您的浏览器窗口，无论它有多宽。媒体查询指示样式何时更改，但容器的宽度始终是浏览器窗口的百分比（而不是固定的像素数）。

“响应式”媒体查询已准备就绪。您只需要决定是否要为页面使用固定宽度或流体宽度布局。

以前，在引导程序 2 中，您必须在流体容器内使用 row-fluid，在固定容器内使用 row。随着 bootstrap 3 的引入，row-fluid 已被移除，不再使用它。

编辑：根据评论，一些 jsFiddles 用于：

流畅的非响应式布局，

流畅的响应式布局，

固定的非响应式布局，

固定响应式布局。

这些小提琴完全没有 Bootstrap，基于纯 CSS 媒体查询，这使它们成为一个很好的起点，对于任何愿意在不使用 Twitter Bootstrap 的情况下制作类似解决方案的人来说。

---

有趣的讨论。我也在问自己这个问题。流体和固定之间的主要区别只是固定布局在网站的整个布局（视口）方面具有固定的宽度。如果您有一个 960 像素宽度的视口，则每个列都有一个永远不会改变的固定宽度。

流体布局表现不同。想象一下，您已将主布局的宽度设置为 100% 宽度。现在，每列将仅计算为它的相对大小（即 25%），并随着浏览器的大小调整而拉伸。因此，根据您的布局目的，您可以选择布局的行为方式。

这是a good article about fluid vs. flex。

---

来源 - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

优点

固定宽度布局在设计方面更易于使用和定制。

每个浏览器的宽度都是相同的，因此固定宽度的图像、表单、视频和其他内容的麻烦更少。

不需要最小宽度或最大宽度，反正不是每个浏览器都支持。

即使网站设计为兼容最小的屏幕分辨率 800×600，在更大的分辨率下内容仍然足够宽以易于阅读。

缺点

固定宽度的布局可能会给屏幕分辨率较大的用户留下过多的空白，从而破坏“神圣比例”、“三分法”、整体平衡等设计原则。

较小的屏幕分辨率可能需要水平滚动条，具体取决于固定布局的宽度。

需要无缝纹理、图案和图像连续性以适应具有更大分辨率的那些。

在可用性方面，固定宽度布局的总体得分通常较低。

---

Bootstrap 3 中的流体布局。

与 Boostrap 2 不同，Bootstrap 3 没有 .container-fluid 混合来制作流体容器。 .container 是一个固定宽度的响应式网格布局。在大屏幕中，网页内容的两边都有过多的空白。

container-fluid 在 Bootstrap 3.1 中重新添加

流畅的网格布局使用所有屏幕宽度，在大屏幕上效果更好。事实证明，使用 Bootstrap 3 mixin 创建流体网格布局很容易。以下行创建了一个流畅的响应式网格布局：

.container-fixed;

.container-fixed mixin 将内容设置到屏幕的中心并添加填充。它没有指定固定的页面宽度。

另一种方法是使用 Eric Flowers' CSS style

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

---

您可以使用它 - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid。看看.. 我发现这个真的很有用。良好的性能，非常轻的重量，所有重要的浏览器友好和流畅，所以你真的不需要网格的引导程序。

---