1

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

<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 引导程序中的所有五个跨度都适合一个物理行的最佳方法是什么？

4

1 回答 1

2

spans最多可以组合 12 个。

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

见：http: //twitter.github.io/bootstrap/scaffolding.html

默认的 Bootstrap 网格系统使用 12 列，形成一个 940 像素宽的容器，没有启用响应功能。添加响应式 CSS 文件后，网格会根据您的视口调整为 724 像素和 1170 像素宽。在 767px 视口以下，列变得流畅并垂直堆叠。

你可以去这里： http: //twitter.github.io/bootstrap/customize.html并自定义列的数量。（我从未亲自尝试过）

于 2013-07-24T19:24:09.877 回答