twitter-bootstrap - Twitter bootstrap 按可用空间划分行流

Question

我有以下用例。
我需要绘制 6 个 html div 块并将其分解为可用空间。
下图将展示它应该是怎样的。你能看看这段代码并告诉我我的跨度有什么问题吗？ http://jsfiddle.net/DWZLE/ 谢谢

以下是代码的开始方式：

<div class="container" style="width: 68%;">
    <div class="row-fluid">

        <div class="span4">
            <div>
                <img src="http://trialx.com/curetalk/wp-content/blogs.dir/7/files/2011/05/diseases/Globus-3-small.gif" />
            </div>
            <h3><a href="http://www.google.com">We speak your language</a></h3>
            <p>
                text text text text text text text text text text text text text text text text text text text text 
                text text text text text text text text text text text text text text text text text text text text text 
            </p> 
        </div>...

更新 我已经把它分成两行，现在，它分解了，但是从连续 3 个连续 2 个 1 连续分解。
而且，它不是居中的。见这里http://jsfiddle.net/DWZLE/

Answer 1

你不能那样做。

在 boostrap 中，每行中的第一个元素没有左边距，因此它可以适合其他元素，因此当您添加 6 span4 时，第 4 个元素（即第二行中的第一个元素）将具有边距-离开，它将推动orher元素。

因此，您应该制作 2 行，每行包含 3 个元素。

Answer 2

我同意滴水。很好解释。

你可以做到。

One Row. (Max span count 12)
<div class="row-fluid">
   <div class="span4">
      ...
   </div
   <div class="span4">
      ...
   </div
   <div class="span4">
      ...
   </div
</div>

Two Row
<div class="row-fluid">
   ...
</div>