4

关于 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>

这很好用，在台式机和平板电脑上连续显示 3 张图片。

在移动设备上，它们仅在彼此下方显示一个。我是否可以在移动设备上显示 2 列？

谢谢你的帮助

4

1 回答 1

5

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

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

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

因为你使用奇数张图片，你会得到最后一行的一张图片 50%。要将不同行的图像放在一起，您必须重置display:table流体行的图像。为您的行添加一个额外的类，如“内联”，并使用媒体查询重置，如：

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

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

推特引导 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 中也会有一个用于小型设备的网格。您可以通过col-small-span-*向您的 div 添加一个额外的类来使用它。注意 span-* 被重命名为 col-span-*。所以你会得到：

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

这将为您在默认网格上提供 33% 的 3 (12/4) 列，在小网格上为您提供 2 (12/6) 列 50%。另见：http ://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

于 2013-06-02T09:59:53.657 回答