Twitter的Bootstrap移动版：更多专栏

<div class="row-fluid">
  <div class="image span-4"></div>
  <div class="image span-4"></div>
  <div class="image span-4"></div>
  <div class="image span-4"></div>
  <div class="image span-4"></div>
  ....
</div>

#1 楼

在768像素宽度以下，（流体）网格将元素堆叠。在引导CSS下方添加媒体查询，包括：

    @media (max-width: 767px) { .row-fluid .image { width:50%; float:left; } }

请注意，在示例代码中，您连续使用了许多span-4。每行的总跨度最多应为12。

由于使用的图像数为奇数，所以最后一行包含50％的图像。要获得不同行的图像，您将必须重置流体行的display:table。向行中添加一个额外的类（例如“ inline”），并使用媒体查询进行重置，例如：

        @media (max-width: 767px) { .row-fluid .image { width:50%; float:left; } .inline:before,.inline:after {display: inline-block; content:none;} }

示例：http://bootply.com/62893

Twitter Bootstrap 3.0

Twitter的Bootstrap 3定义了三个网格：用于电话的微小网格（<480px），用于平板电脑的小网格（<768px）和用于Destkops的中型网格（ > 768px）。这些网格的行类前缀为“ .col-”，“。col-sm-”和“ .col-lg-”。中型网格将堆叠到768像素以下的屏幕宽度。低于480像素的小网格也不会堆叠。旧手机除外，该手机始终会堆叠这些元素（移动优先设计）。适用于电话的微小网格（<768px），适用于平板电脑的小型网格（> 768px）和适用于Destkops的中大型网格（> 992px）。这些网格的行类前缀为“ .col-”，“。col-sm-”和“ .col-lg-”。中型网格将堆叠在992像素以下的屏幕宽度。小于768像素的小网格也不会堆叠。旧手机除外，该手机始终会堆叠这些元素（移动优先设计）。 （基于TB3 RC1）

对于移动设备，您可以使用“ .col-”前缀（小网格），但是您仍然遇到连续图像数量奇数的问题。要解决此问题，您可以尝试为连续的几列添加24，而不是添加12。或者对TB2使用与上述相同的解决方案。

请参阅：http://bootply.com/70644

在Twitter Bootstrap 3.0中，小型设备也将有一个网格。您可以通过在div中添加额外的类col-small-span-*来使用它。注意span- *重命名为col-span- *。这样您将得到：

     <div class="image col-span-4 col-small-span-6"><img src="//placehold.it/350x150">/div>

这将为您提供3（12/4）列，占默认网格的33％，2（12/6）列，占50 ％在小网格上。另请参阅：http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/