Question

关于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张图片。

在移动设备上，它们只显示一个在彼此之下。我是否有可能在移动设备旁边显示两列？

感谢您的帮助

Answer 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定义了三个网格：手机的小网格（＆lt; 480px），平板电脑的小网格（＆lt; 768px）和Destkops的中大网格（＆gt; 768px）。这些网格的行类前缀是“.col-”，“。col-sm-”和“.col-lg-”。中大网格将堆叠在768像素以下的屏幕宽度。那么480像素以下的小网格也是如此，小网格从不堆叠。除了总是将堆叠元素的旧手机（移动优先设计）。用于电话的小网格（＆lt; 768px），用于平板电脑的小网格（＆gt; 768px）和用于Destkops的中 - 大网格（＆gt; 992px）。这些网格的行类前缀是“.col-”，“。col-sm-”和“.col-lg-”。中大网格将堆叠在992像素以下的屏幕宽度。那么768像素以下的小网格也是如此，小网格从不堆叠。除了总是会堆叠元素的旧手机（移动优先设计）。（基于TB3 RC1）

对于移动设备，您可以使用“.col-”前缀（微小网格），但仍然存在连续奇数个图像的问题。要解决此问题，您可以尝试连续为12列添加24列。或者对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％的列，在小网格上提供50％的2（12/6）列。~~参见：http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

Twitter的Bootstrap手机：更多专栏

1 个答案: