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

Question

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

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

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

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

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

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

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

Answer 1

有趣的讨论。我也在问自己这个问题。固定版和固定版之间的主要区别仅在于，固定版式在网站（视口）的整个版式上具有固定的宽度。如果您有一个960像素宽的视口，则每个列的宽度都是固定的，永远不会改变。流体布局的行为有所不同。假设您已将主布局的宽度设置为100％宽度。现在，每列将仅根据其相对大小（即25％）进行计算，并随着调整浏览器的大小而拉伸。因此，根据您的布局目的，您可以选择布局的行为。