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

我对twitter引导网格中的各种选项以及它们如何组合在一起感到困惑。

首先，您可以有一个普通的fixed container或一个container-fluid。

然后，可以包含一个普通row行或一个流体行row-fluid。也就是说，您可以使用带有固定排的固定容器，或者带有固定排的容器流体...？

然后，最重要的是，您可以包括“响应式”媒体查询，也可以不包括。

我对这些东西如何相互作用感到困惑。但是，让我们从一个明显的例子开始。

在示例页面本身上，提供了作为固定网格和流体网格的示例的内容

但是，在我的浏览器中，在该示例页面本身上-两个网格的行为相同。也许因为示例页面使用了可选的响应式媒体查询？在这两个网格示例中，如果我开始逐渐缩小浏览器窗口的范围，则网格元素不会逐渐变窄-一旦达到某个（响应）边界宽度，它们将捕捉为较小的尺寸，然后又变为更远的边界宽度。但是普通的“固定”示例和“流体”示例在这里的行为完全相同-那么到底有什么区别呢？

在确定固定宽度和流体宽度之间时，您需要考虑整个页面。通常，您要选择一个，但不要两个都选。您在问题中列出的示例实际上是在相同的固定宽度页面中。换句话说，“脚手架”页面正在使用固定宽度的布局。“ 脚手架”页面上的固定网格和流体网格并不是示例，而是用于实现固定宽度和流体宽度布局的文档。

正确的固定宽度示例在此处。正确的流体宽度示例在此处。

当观察固定宽度的示例时，当浏览器的宽度大于960px时，您不应看到内容的大小更改。这是页面的最大（固定）宽度。固定宽度设计中的媒体查询将为特定样式指定最小宽度。当您缩小浏览器窗口并看到布局对齐到其他大小时，您将看到此操作。

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

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

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

编辑：根据评论，一些jsFiddles为：

• 流畅的无响应布局，
• 流体响应式布局，
• 固定的非响应式布局，
• 固定响应式布局。

这些小提琴完全基于纯CSS媒体查询，完全不需要Bootstrap，对于任何愿意在不使用Twitter Bootstrap的情况下制定相似解决方案的人来说，这都是一个很好的起点。

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

流体布局的行为有所不同。假设您已将主布局的宽度设置为100％宽度。现在，每列将仅根据其相对大小（即25％）进行计算，并随着调整浏览器的大小而拉伸。因此，根据您的布局目的，您可以选择布局的行为。

这是一篇关于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 mixin来制作流体容器。.container是固定宽度的响应网格布局。在大屏幕中，一个人的网页内容的两边都有过多的空白。

container-fluid 被添加回Bootstrap 3.1

流体网格布局会使用所有屏幕宽度，并且在大屏幕中效果更好。事实证明，使用Bootstrap 3 mixins创建流体网格布局很容易。以下行进行了灵活的网格布局：

.container-fixed;

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

另一种方法是使用Eric Flowers的CSS样式

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

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