[英]Is it ok to have a row-fluid inside a row?
I've been playing with the Twitter Bootstrap grid system , and noticed that I could mix row
and row-fluid
in the following way: 我一直在玩Twitter Bootstrap 网格系统 ,并注意到我可以通过以下方式混合
row
和row-fluid
:
<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
? 或者我应该只在另一
row-fluid
使用row-fluid
row-fluid
?
The main purposes of .row-fluid
is to alter the styling of .spanX
elements. .row-fluid
的主要目的是改变.spanX
元素的样式。
Within .row
, .spanX
elements have a fixed pixel width. 在
.row
, .spanX
元素具有固定的像素宽度。 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. 但是,在
.row-fluid
中, .spanX
元素具有基于百分比的宽度。 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. 这里一个很好的副作用是
.row-fluid
元素可以放在任何元素内部,它只需将自身的大小调整为容器宽度的100%。 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. 同样,此流体行中的任何
.spanX
元素都会相应地调整大小,因此每个“列”大约是.row-fluid
容器的.row-fluid
之一(占沟槽宽度),而不管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. 如果您要将页面的任何区域拆分为某些设定数量的列,则可以使用
.row-fluid
。
Yes, it's reliable and documented. 是的,它可靠且有文件记录。 Take a look at Basic fluid grid HTML section on th documentation.
请查看文档中的Basic fluid grid HTML部分。 As you will see you can:
正如您将看到的,您可以:
Make any row "fluid" by changing .row to .row-fluid.
通过将.row更改为.row-fluid使任何行“流动”。 The column classes stay the exact same, making it easy to flip between fixed and fluid grids.
列类保持完全相同,使得在固定网格和流体网格之间轻松切换。
It means that you can use this component anywhere in your layout, doesn't matter if it's fluid or not. 这意味着您可以在布局中的任何位置使用此组件,无论它是否流畅都无关紧要。 You will note also that "Fluid layout" section is completely separated from this one.
您还会注意到“流体布局”部分与此部分完全分开。
Yes you can use the row and row-fluid in this way. 是的,你可以用这种方式使用行和流体。 If you are using
bootstrap-responsive.css
also then when the browser is re-sized or the page is viewed on mobile devices the grid sizes are altered to fit. 如果您正在使用
bootstrap-responsive.css
那么当重新调整浏览器大小或在移动设备上查看页面时,网格大小会被更改为适合。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.