我一直在使用 Twitter Bootstrap 网格系统，并注意到我可以通过以下方式混合 row 和 row-fluid :
<div class="span8">...<div class="span4><div class="row-fluid"><div class="span8">...
<div class="span4">...
这对我有用，但是我不确定我是否可以依靠这种行为来保持一致.如果发现文档对此主题不清楚.
这是对网格系统的记录且可靠的使用吗?还是我应该只在另一个 row-fluid 中使用 row-fluid?
.row-fluid 的主要目的是改变 .spanX 元素的样式.
在.row 中，.spanX 元素具有固定的像素宽度.如果您使用响应式样式表，此宽度可能会根据视口尺寸而变化.
在.row-fluid 中，.spanX 元素具有基于百分比的宽度.这里的一个很好的副作用是 .row-fluid 元素可以放置在 any 元素内，并且它会简单地将自身大小调整为容器宽度的 100%.同样，此流体行中的任何 .spanX 元素都会相应地调整自身大小，因此每个列"大约是 .row-fluid 容器，无论行在 DOM 中的宽度或位置如何.
如果您想将页面的任何区域拆分为一定数量的列，可以使用 .row-fluid.
I've been playing with the Twitter Bootstrap grid system, and noticed that I could mix row and row-fluid in the following way:
<div class="row">
<div class="span8">
...
</div>
<div class="span4>
<div class="row-fluid">
<div class="span8">
...
</div>
<div class="span4">
...
</div>
</div>
</div>
</div>
That works for me, however I'm not sure if I can rely on this behaviour to stay consistent. If find the documentation to be unclear on this subject.
Is this a documented, and reliable, use of the grid system? Or should I only use row-fluid inside another row-fluid?
The main purposes of .row-fluid is to alter the styling of .spanX elements.
Within .row, .spanX elements have a fixed pixel width. This width may change based on viewport dimensions if you're using the responsive stylesheet.
Within .row-fluid, however, .spanX elements have a percentage-based width. One of the nice side effects here is that a .row-fluid element can be placed inside any element, and it will simply size itself to 100% of the container's width. Likewise, any .spanX elements within this fluid row will size themselves accordingly, so that each 'column' is roughly one 12th (accounting for gutter width) of the .row-fluid container, regardless of the row's width or location in the DOM.
If there is any area of your page that you want to split into some set number of columns, .row-fluid can be used.
这篇关于行内有行流体可以吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
