流体或固定网格系统，响应式设计，基于 Twitter Bootstrap [英] Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
问题描述
我对 twitter bootstrap 网格中的各种选项感到困惑，以及他们如何走到一起.
I'm getting confused about the various options in the twitter bootstrap grid, and how they go together.
首先，你可以有一个普通的固定container，或者一个container-fluid.
To begin with, you can have an ordinary fixed container, or a container-fluid.
那么任何一个都可以包含一个普通的row，或者一个流体行，row-fluid.也就是说，你可以有一个带有流体行的固定容器，或者一个带有固定行的容器流体......?
Then either one can include either an ordinary row, or a fluid row, row-fluid. That is, you can have a fixed container with a fluid row, or a container-fluid... with a fixed row?
然后，最重要的是，您可以包含或不包含响应式"媒体查询.
Then on top of that, you can include the 'responsive' media queries, or not.
我对这些东西如何相互作用感到困惑.但让我们从一个明显的例子开始.
I am getting confused as to how these things interact. But let's start with one obvious example.
在示例页面本身上，有一个示例页面一个 href="http://twitter.github.com/bootstrap/scaffolding.html#gridSystem" rel="noreferrer">固定网格 和一个 流体网格
On the examples page itself, there's what's presented as an example of both a fixed grid and a fluid grid
但是，在我的浏览器中，在该示例页面本身上 - 两个网格的行为相同.也许是因为示例页面使用了可选的响应式媒体查询?在两个网格示例中，如果我开始逐渐缩小浏览器窗口，网格元素不会逐渐变窄——一旦达到某个(响应)边界宽度，它们捕捉到较小的尺寸，并再次捕捉到更远的边界宽度.但是普通的固定"示例和流体"示例在这里的行为完全相同——那么到底有什么区别?
However, in my browser, on that example page itself -- both grids behave identically. Perhaps because the example page uses the optional responsive media queries? In both grid examples, if I start gradually narrowing my browser window, the grid elements do not get gradually narrower -- once a certain (responsive) boundary width is reached, they snap to a smaller size, and again at further boundary widths. But both the ordinary 'fixed' example AND the 'fluid' example behave exactly the same here -- so what the heck is the difference?
推荐答案
当您在固定宽度和可变宽度之间做出决定时，您需要从整个页面的角度来考虑.通常，您想选择其中之一，但不能同时选择两者.您在问题中列出的示例实际上位于同一个固定宽度的页面中.换句话说，Scaffolding 页面使用的是固定宽度的布局.固定网格和流体网格 并不是示例，而是用于实现固定宽度和流体宽度布局的文档.
When you decide between fixed width and fluid width you need to think in terms of your ENTIRE page. Generally, you want to pick one or the other, but not both. The examples you listed in your question are, in-fact, in the same fixed-width page. In other words, the Scaffolding page is using a fixed-width layout. The fixed grid and fluid grid on the Scaffolding page are not meant to be examples, but rather the documentation for implementing fixed and fluid width layouts.
The proper fixed width example is here. The proper fluid width example is here.
在观察固定宽度示例时，当您的浏览器宽度大于 960 像素时，您不应看到内容改变大小.这是页面的最大(固定)宽度.固定宽度设计中的媒体查询将为特定样式指定最小宽度.当您缩小浏览器窗口并看到布局对齐到不同的大小时，您将看到这一点.
When observing the fixed width example, you should not see the content changing sizes when your browser is greater than 960px wide. This is the maximum (fixed) width of the page. Media queries in a fixed-width design will designate the minimum widths for particular styles. You will see this in action when you shrink your browser window and see the layout snap to a different size.
相反，流体宽度布局将总是拉伸以适应您的浏览器窗口，无论它有多宽.媒体查询指示样式何时更改，但容器的宽度始终是浏览器窗口的百分比(而不是固定数量的像素).
Conversely, the fluid-width layout will always stretch to fit your browser window, no matter how wide it gets. The media queries indicate when the styles change, but the width of containers are always a percentage of your browser window (rather than a fixed number of pixels).
响应式"媒体查询已准备就绪.您只需要决定是要为页面使用固定宽度布局还是可变宽度布局.
The 'responsive' media queries are all ready to go. You just need to decide if you want to use a fixed width or fluid width layout for your page.
以前，在引导程序 2 中，您必须在流体容器中使用 row-fluid，在固定容器中使用 row.随着引导程序 3 的引入，row-fluid 被移除，不再使用它.
Previously, in bootstrap 2, you had to use row-fluid inside a fluid container and row inside a fixed container. With the introduction of bootstrap 3, row-fluid was removed, do no longer use it.
编辑:根据评论，一些 jsFiddles 用于:
EDIT: As per the comments, some jsFiddles for:
这些 fiddles 完全没有 Bootstrap，基于纯 CSS 媒体查询，这使它们成为一个很好的起点，对于任何愿意在不使用 Twitter Bootstrap 的情况下制作类似解决方案的人来说.
These fiddles are completely Bootstrap-free, based on pure CSS media queries, which makes them a good starting point, for anyone willing to craft similar solution without using Twitter Bootstrap.
这篇关于流体或固定网格系统，响应式设计，基于 Twitter Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
