在twitter引导程序中行流体与行

时间:2014-09-05 09:34:34

标签: javascript css twitter-bootstrap twitter-bootstrap-3

我有一个container-fluid容器元素,并且一直使用row而不是row-fluid,诚然是出于无知。
现在我正在尝试替换{{} 1}}具有row类的类,但遇到了一些问题。
首先,我看了row-fluid宽度是如何在.less中定义的,它对我来说是完全象形文字的,所以有人愿意解释吗?

更重要的是,当我用row-fluid替换行时,元素的高度会折叠为0,要求我包含.clearfix类,以便row-fluid元素增长到包含它儿童专栏。为什么这是必要的,即什么是浮动以及为什么当我用row-fluid替换row时?除了讽刺row-fluid(我做过)之外,任何输入都会非常感激。

3 个答案:

答案 0 :(得分:6)

这取决于你想知道宽度的元素。 row-fluid类本身的宽度为100%。跨度(或列)具有相对宽度,以这样的方式设置,它结合到100。

浮动:所有列都浮动,这就是它的流动性。 row-fluid唯一与身高相关的事情是设置min-height: 30px。根据定义,这使得任何东西都会崩溃到0的高度。

我怀疑你在旧网格上做的样式是造成主要问题的原因。

答案 1 :(得分:3)

这就是twitter bootstrap所说的:

  

行必须放在.container(固定宽度)或.container-fluid(全宽)内,以便正确对齐和填充。

嗯,这大约是container而不是rows,但是如果这个解释对你来说还不够,那么this is这个简短的解释应该会让你明白。

注意:如果版本为2,那么row-fluid本身就是float: left,需要按照您的说法清除。

这是因为Fluid网格使用不同的嵌套:每个嵌套级别的列最多可以添加12列。这是因为流体网格使用百分比而不是像素来设置宽度。

希望这会有所帮助:)

答案 2 :(得分:2)

Bootstrap 2.x到3.0类更改 Bootstrap 2.x - > .row-fluid 和Bootstrap 3.0 - > .row