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

Posted 2023-02-16

【中文标题】响应式设计的流动或固定网格系统，基于 Twitter Bootstrap

【英文标题】：Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap

【发布时间】：2012-04-04 12:55:06

【问题描述】：

我对@9​​87654321@ 中的各种选项以及它们如何组合在一起感到困惑。

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

那么其中任何一个都可以包括普通的row，或流动的行row-fluid。也就是说，您可以拥有一个带有流体行的固定容器，或者一个带有固定行的容器流体......？

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

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

在the examples page 本身上，有一个fixed grid 和fluid grid 的示例

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

【问题讨论】：

也许this 是流畅布局风格的一个更好的例子？

【参考方案1】：

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

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

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

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

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

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

编辑：根据 cmets，一些 jsFiddles 用于：

fluid non-responsive layout, fluid responsive layout, fixed non-responsive layout, fixed responsive layout。

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

【讨论】：

嗯，好吧，在我看来，文档建议您可以混合和匹配流体和固定，但我想这是我还没有准备好的高级用法。 :) 我仍然不明白responsive 是如何分别改变固定和流体的——你可以使用响应式（或不响应式）来固定和流体，对吧？你能解释一下响应如何影响它们吗？

让我感到困惑的是，“正确的固定宽度”示例确实会随着浏览器窗口的变化而改变列的大小（因为它是响应式的？）正确的流体宽度示例也是如此。但我猜流体宽度的例子是连续的，而固定宽度的响应例子是离散的跳跃，以及达到最大尺寸？是这样吗？流体响应与不响应如何？

你明白了。在固定宽度布局中，当浏览器窗口达到媒体查询中定义的宽度时，列会发生变化。因此，当您的窗口宽度大于 960 像素时，它将保持最大宽度。然后，当您将浏览器缩小到 959 像素时，它将根据最大宽度为 768 像素的媒体查询捕捉到新布局。因此，因为您正在查看固定宽度的布局，所以当您的浏览器宽度介于 768 和 960 之间时，列 不会 发生变化。

当您查看流体宽度布局时，列大小将始终更改以匹配浏览器的宽度。布局本身也会根据媒体查询而改变，就像固定宽度的布局一样。

要记住的最重要的一点是固定宽度 = 像素，流动宽度 = 百分比。响应性来自 bootstrap-responsive.css 中定义的所有花哨的 CSS 规则，这些规则适用于两种布局。

【参考方案2】：

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

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

这里是a good article about fluid vs. flex。

【参考方案3】：

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

优点

在设计方面，固定宽度布局更易于使用和自定义。 每个浏览器的宽度都是相同的，因此对于固定宽度的图像、表单、视频和其他内容而言，麻烦会更少。 不需要 min-width 或 max-width，反正不是每个浏览器都支持。 即使网站设计为与最小的屏幕分辨率 800×600 兼容，在更大的分辨率下内容仍然足够宽以易于阅读。

缺点

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

【参考方案4】：

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;

【讨论】：

我不明白为什么人们一直说 Bootstrap 3 不支持'container-fluid'，而它却支持。我刚刚仔细检查过，在 Bootstrap 3.1.0 中它已经明确定义了。

那是因为在3added back in 3.1被删除了。

【参考方案5】：

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

我同意..但这不是对答案的引用，这是插件的链接，可以下载文件，我想我不能在这里附上带有答案的文件..