使用twitter bootstrap折叠网格3 [英] Collapsing grids with twitter bootstrap 3

问题描述

我有一个4排4格网格。

大
1行4列

中等
2行2列

小
2行2列

Xtra小
4行1列

将不胜感激。谢谢

解决方案

试试这个..

 < div class =container> 
< div class =row> 
< div class =col-lg-3 col-sm-6> x< / div> 
< div class =col-lg-3 col-sm-6> x< / div> 
< div class =col-lg-3 col-sm-6> x< / div> 
< div class =col-lg-3 col-sm-6> x< / div> 
< / div> 
< / div> 
  

在这种情况下，您只需指定 col-sm - * ，因为sm和md是相同的布局，并且网格会自动堆叠到最小设备（xs）上的单个列。

演示：< a href =http://bootply.com/86156 =nofollow> http://bootply.com/86156

I have a 1 row 4 col grid. How do I collapse it like this.

Large 1 Row 4 columns

Medium 2 rows 2 columns

Small 2 rows 2 columns

Xtra Small 4 rows 1 column

Any help would be appreciated. Thank you

解决方案

Try this..

<div class="container">
 <div class="row">
    <div class="col-lg-3 col-sm-6">x</div>
    <div class="col-lg-3 col-sm-6">x</div>
    <div class="col-lg-3 col-sm-6">x</div>
    <div class="col-lg-3 col-sm-6">x</div>
  </div>
</div>

In this case, you only need to specify col-sm-* since sm and md are the same layout, and the grid will automatically stack into a single col on smallest devices (xs).

Demo: http://bootply.com/86156

这篇关于使用twitter bootstrap折叠网格3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！