twitter-bootstrap - 响应式设计, 基于Twitter Bootstra或者固定网格系统。

  显示原文与译文双语对照的内容

我对 Twitter Bootstrap 网格中的各种选项感到困惑,以及它们如何一起使用。

首先,你可以有一个普通的固定 container,或者一个 container-fluid

然后可以包括普通 row,也可以包含流体行,row-fluid 。 也就是说,你可以有一个带有流体行或者container-fluid的固定容器。。 使用固定行?

然后,你可以包括'正在响应'媒体查询,或者不包括。

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

这些示例页面本身上,也就是既有为例,提出了一种固定的网格和一个流体网格

但是,在浏览器中,在该示例页面本身上,两个网格的行为都相同。 可能是因为示例页面使用了可选的响应媒体查询? 在更多边界处理同时在 widths, 网格例子,如果我开始逐步缩小我的浏览器窗口,在网格元素做不得到逐渐狭窄--一旦达到一定的边界层( 正在响应) 宽度时,它们可以捕捉到较小的尺寸,和一遍, 但都的一般'固定'示例,并测试'流体'示例这里表现非常相似--所以物超所值的区别是什么?

时间:

当你决定固定宽度和流体宽度时,你需要考虑整个页面。 通常,你想要选择一个,但不是两个。 你在问题中列出的示例是 in-fact,在同一个fixed-width页面中。 换句话说,"脚手架"页面使用的是fixed-width布局。 固定网格流体网格在脚手架页面上并不意味着是示例,而是实现固定和流畅宽度布局的文档。

适当的固定宽度示例是这里的 。 适当的流体宽度示例是

当观察固定宽度示例时,当浏览器大于 960像素时,不应该看到内容改变大小。 这是页面的最大( 固定) 宽度。 fixed-width设计中的媒体查询将指定特定样式的最小宽度。 当你缩小浏览器窗口并查看不同大小的版式时,你将看到这里操作。

相反地,的fluid-width布局将总是 拉伸以适合你的浏览器窗口,不管有多宽它得到。 媒体查询表示样式更改的时间,但容器的宽度总是浏览器窗口( 而不是固定的像素数)的百分比。

'正在响应'媒体查询都准备就绪了。 你只需要决定是否要为页面使用固定宽度或者流体宽度布局。

创建行时,请确保使用具有固定宽度布局的row,以及具有流体宽度的row-fluid 。 不混合和匹配( 除非你有一个很好的理由) 。

于,编辑: 见本相关评论,有些 jsFiddles :

这些fiddles是完全Bootstrap-free的,基于纯CSS媒体查询,这使得它们成为一个很好的起点,任何人都愿意使用类似的解决方案而不用使用 Twitter Bootstrap 。

Bootstrap 3中的流体布局。

Boostrap 2不同,Bootstrap 3没有一个。container-fluid mixin来生成一个流体容器。 容器是一个固定宽度响应网格布局。 在一个大屏幕中,一个页面内容的两边都有过多的空白。

container-fluid 被添加到 Bootstrap 3.1中

流体网格布局使用所有屏幕宽度,在大屏幕上效果更好。 使用 Bootstrap 3 mixin创建一个流体网格布局很容易。 下面的代码行给出了一个流畅的网格布局:

container-fixed ;

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

另一种方法是使用的css样式


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

...