Twitter的Bootstrap手机：更多的列 [英] Twitter's Bootstrap mobile: more columns

问题描述

关于twitter启动，我目前有一个在网格中显示图片的设计

Regarding twitter bootstrap, I currently have a design showing pictures in a grid

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

This works quite well, showing 3 pictures in a row on desktop and tablet.

在手机上，他们只显示一个在下面。

On mobile, they only show one under each other. Do I have the possibility to show 2 columns next to each on mobile?

感谢您的帮助

推荐答案

在下面的768像素宽度（流体）网格堆栈的元素。在引导css下面添加媒体查询：

Below the 768 pixel width the (fluid) grid stack the elements. Add a media query below your bootstrap css include:

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

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

Note in your example code you use many span-4's in a row. The total span of a row should be max 12.

由于使用奇数个图像，最后一行将显示一个图像50％。要获取不同行的图像在一起，你将不得不重置流体行的 display：table 。为您的行添加一个额外的类，如'inline'，并使用媒体查询重置为：

Cause you use a odd number of images, you will get the last row with one image 50%. To get images of different row together you will have to reset the display:table of your fluid row. Add an extra class to your rows like 'inline' and use the media query to reset like:

        @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）

Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are ".col-", ".col-sm-" and ".col-lg-". The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design). Tiny grid for Phones (<768px), Small grid for Tablets (>768px) and the Medium-Large grid for Destkops (>992px). The row class prefixes for these grid are ".col-", ".col-sm-" and ".col-lg-". The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design). (based on TB3 RC1)

对于手机，您可以使用.col-前缀（微格），但是仍然有奇数个图像的问题一排。要解决这个问题，您可以尝试为一行中的列添加24，而不是12。或者使用与上述TB2相同的解决方案。

For mobile you could use the ".col-" prefixes (tiny grid) but you still got the problem with the odd number of images in a row. To fix this you could try to add 24 for columns in a row instead of 12. Or use the same solution as above for TB2.

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

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

In Twitter Bootstrap 3.0 there will be a grid for small devices too. You can use this by adding an extra class col-small-span-* to your divs. Note span-* is renamed to col-span-*. So you will get:

     <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/

This will give you 3 (12/4) columns of 33% on the default grid and 2 (12/6) columns of 50% on the small grid. See also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

这篇关于Twitter的Bootstrap手机：更多的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！