Twitter的Bootstrap手机:更多专栏

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定义了三个网格:手机的微小网格(<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-"前缀(微小网格),但仍然存在连续奇数个图像的问题.要解决此问题,您可以尝试连续为12列添加24列.或者对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>

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