Twitter bootstrap 流体或固定网格系统，响应式设计，基于Twitter引导

我对未来的各种选择以及它们如何结合感到困惑

首先，您可以使用普通的固定式

容器

，或

容器流体

然后，任何一个都可以包括普通

行

，或流体行，

行流体

。也就是说，您可以有一个带有流体行的固定容器，或者一个流体容器。。。排成一排

除此之外，您还可以包括“响应式”媒体查询，也可以不包括

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

就其本身而言，这里有一个a和a的例子

---

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

当您决定固定宽度和流体宽度时，您需要考虑整个页面。通常，您希望选择其中一个，但不能同时选择两个。事实上，您在问题中列出的示例位于同一固定宽度的页面中。换句话说，脚手架页面使用固定宽度的布局。脚手架页面上的和不是示例，而是用于实现固定宽度和流体宽度布局的文档

正确的固定宽度示例如下所示。 正确的流体宽度示例如下所示

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

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

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

以前，在bootstrap 2中，您必须在流体容器内使用

行流体

，在固定容器内使用

行流体

。随着bootstrap 3的引入，

行流体

被删除，不再使用它

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

• ,
• ,
• ,

---

这些提琴完全没有引导功能，基于纯CSS媒体查询，这使它们成为一个很好的起点，任何人都愿意在不使用Twitter引导的情况下设计类似的解决方案。

有趣的讨论。我也在问自己这个问题。“流体”和“固定”的主要区别在于，固定布局在网站的整个布局（视口）中具有固定的宽度。如果有一个960px宽的视口，则每个柱都有一个固定的宽度，该宽度永远不会改变

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

这是。

来源-

专业人士

• 固定宽度布局在设计方面更易于使用和自定义
• 每个浏览器的宽度都是相同的，因此对于固定宽度的图像、表单、视频和其他内容，麻烦更少
• 不需要最小宽度或最大宽度，但并非每个浏览器都支持
• 即使一个网站被设计成与最小的屏幕分辨率（800×600）兼容，内容仍然足够宽，分辨率更高，易于阅读

缺点

• 固定宽度的布局可能会为屏幕分辨率更大的用户创建过多的空白，从而打乱“神圣比例”、“三分法则”、整体平衡和其他设计原则
• 较小的屏幕分辨率可能需要一个水平滚动条，这取决于固定布局的宽度
• 无缝的纹理、图案和图像延续需要适应分辨率更高的图像
• 在可用性方面，固定宽度布局的总体得分通常较低

---

引导3中的流体布局

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

容器流体

添加回Bootstrap 3.1中

流体网格布局使用所有屏幕宽度，在大屏幕中效果更好。事实证明，使用bootstrap3mixin很容易创建流体网格布局。以下线条构成流体响应栅格布局：

.固定货柜

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

另一种方法是使用

.my流体容器{
左侧填充：15px；
右侧填充：15px；
左边距：自动；
右边距：自动；
}

您可以使用这个-…JSLightGrid。看一看。。我不知道