Twitter引导程序按可用空间划分行流体

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行，连续两行1 并且，它没有居中。见http://jsfiddle.net/DWZLE/

Answer 1

你无法做到这一点。

在boostrap中，每行中的第一个元素没有margin-left，因此它可以适合其他元素，所以当你添加6个span4时，4个元素（这是第二行中的第一个元素）将有左边缘，它会推动其他元素。

所以你应该制作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>