Twitter 的 Bootstrap 移动版：更多专栏答案

【问题标题】：Twitter's Bootstrap mobile: more columnsTwitter 的 Bootstrap 移动版：更多专栏
【发布时间】：2013-08-11 05:06:41
【问题描述】：

关于 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 列吗？

感谢您的帮助

【问题讨论】：

扭曲手机？我猜图像（包括填充/边距）比可用空间的一半宽。

标签： css twitter-bootstrap

【解决方案1】：

在 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

Twitter Bootstrap 3.0

Twitter 的 Bootstrap 3 定义了三个网格：用于手机的小网格 (768px)。这些网格的行类前缀是“.col-”、“.col-sm-”和“.col-lg-”。中大型网格将堆叠在 768 像素以下的屏幕宽度之下。小于 480 像素的小网格也是如此，小网格永远不会堆叠。除了总是会堆叠元素的旧手机（移动优先设计）。用于手机的小网格（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>

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

【讨论】：

感谢 Bootstrap 3 信息和链接！
这就是我要找的。谢谢！