Question

我有一些简单的标记，如下所示：

<div class="row" id="features">
        <div class="span3 divider">
            <div class="featureicon"><i class="icon-trophy"></i></div>
            <h3>some header</h3>
            <p>some text</p>
        </div>        
        <div class="span3 divider">
            <div class="featureicon"><i class="icon-comments"></i></div>
            <h3>some header</h3>
            <p>some text.</p>
        </div>       
        <div class="span3 divider">
            <div class="featureicon"><i class="icon-male"></i></div>
            <h3>another header</h3>
            <p>more text</p>
        </div>
         <div class="span3 divider">
            <div class="featureicon"><i class="icon-wrench"></i></div>
            <h3>yet another header</h3>
            <p>some more text</p>
          </div>
        <div class="span3">
          <div class="featureicon"><i class="icon-male"></i></div>
            <h3>last header</h3>
            <p>last bit of text</p>
        </div>
      </div><!--end row-->

如果没有我添加最终的span3 div，一切看起来都很棒。问题是，我需要在这一行中有5个跨度，而不是4.屏幕上肯定有适合它的空间，但它只是下降到下一行。将Twitter引导程序中的所有五个跨度放在一个物理行上的最佳方法是什么？

Answer 1

spans最多可以达到12个组合。

所以..... 4 4 4，3 3 3 3，12，10 2等是可能的组合。

请参阅：http://twitter.github.io/bootstrap/scaffolding.html

默认的Bootstrap网格系统使用12列，制作一个 940px宽的容器，未启用响应功能。随着添加了响应式CSS文件，网格适应724px和1170px宽取决于您的视口。低于767px视口，列成为流体和垂直堆叠。

您可以到此处：http://twitter.github.io/bootstrap/customize.html并自定义列数。（我从未亲自尝试过）

Bootstrap跨度分成一个新行，而不是与一行中的其他跨度对齐

1 个答案: