Question

我正在使用twitter bootstrap3，我想制作一些非常常见的东西，一张根据设备宽度调整大小的产品表。

我正在使用（xs，sm，md，lg）来确定何时应该调整表的大小。这是一个例子：

我有8个产品，在LG和MD上，我想在每条线上显示4个产品。在SM和XS上，我希望每行都能看到2个产品。

这是我的HTML代码：

<div class="row">
    <div class="col col-lg-3 border">
        <img src="img/product1.jpg">          
    </div>
    <div class="col col-lg-3 border"><img src="img/product2.jpg"></div>
    <div class="col col-lg-3 border"><img src="img/product3.jpg"></div>
    <div class="col col-lg-3"><img src="img/product4.jpg"></div>
</div>
<div class="row">        
    <div class="col col-lg-3 border">
        <img src="img/product5.jpg">
    </div>
    <div class="col col-lg-3 border"><img src="img/product6.jpg"></div>
    <div class="col col-lg-3 border"><img src="img/product7.jpg"></div>
    <div class="col col-lg-3"><img src="img/product8.jpg"></div>
</div>

Css代码：

.border {
    border-right: 1px solid #000;
}

正如你所看到的，前3个元素有一个叫做border的类（我想用垂直的lign分隔它们）

所以LG和MD屏幕上的内容是这样的：

P1 | P1 | P3 | P4
P5 | P6 | P7 | P8

我想要的SM和XS屏幕是：

P1 | P2
P3 | P4
P5 | P6
P7 | P8

我该怎么做？

Answer 1

您需要为md，sm和xs指定相应的类名。这在http://getbootstrap.com/css/#grid中有所描述。

由于这是一个12列网格系统，如果需要两列，则将值6 = 12/2赋予sm和xs。对于md有四列然后与lg相同它应该是3 = 12/4。因此代码应该如下，

http://jsfiddle.net/CcAe5/3/show/

<div class="row">
    <div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border">
        <img src="http://placehold.it/50x50" />          
    </div>
    <div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
    <div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
    <div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 "><img src="http://placehold.it/50x50" /></div>
</div>
<div class="row">        
    <div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border">
        <img src="http://placehold.it/50x50" />
    </div>
    <div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
        <div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
        <div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6"><img src="http://placehold.it/50x50" /></div>
</div>

编辑1

在最后一次评论之后，如果要求在中型和大型屏幕尺寸的四列网格中简单地显示任意数量的元素，并且在小尺寸和超小尺寸中显示两列，则不应将任何元素划分为“row”元素。所以代码可以是，

<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border">
    <img src="http://placehold.it/50x50" />          
</div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>

<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border">
    <img src="http://placehold.it/50x50" />
</div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
    <div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>

http://jsfiddle.net/5ahga/1/show/

编辑2

在对边框的最后评论之后，一种可能的解决方案是找出属于4列边框布局的哪些元素以及属于2列边框布局的元素。下面的代码添加了相应的类。

$(document).ready(function(){
    var fourColElems=$('.border').filter(function(i){return (i+1)%4!=0;});
    fourColElems.addClass("lg-md-border");

    var twoColElems = $('.border').filter(function(i){return (i+1)%2!=0;});
    twoColElems.addClass("sm-xs-border");
});

添加的类将根据屏幕分辨率激活，因此通过一些媒体查询，一切都将按要求运行。

@media (max-width: 991px) {/*Small devices Tablets (≥768px)*/
     .border{
        border-right:none;
     }
   .sm-xs-border{
     border-right : 1px solid red; 
    }
}

@media (min-width: 992px) {/*Medium devices Desktops (≥992px)*/
     .border{
        border-right:none;
     }
   .lg-md-border{
     border-right : 1px solid green; 
    }
}

http://jsfiddle.net/2RWLW/show/

此外，如果需要根据元素的数量均匀地分割元素，即6个元素不能在4列中均匀分割，但应动态显示3列网格，或者如果有7个元素则使用7列。然后，您需要先使用jquery修改运行时的类名，首先进行一些计算。

Answer 2

您可以使用md和xs类，因为它们控制您需要控制的响应网格范围的最小。

<div class="row">
    <div class="col-md-3 col-xs-6 border">p1</div>
    <div class="col-md-3 col-xs-6 border">p2</div>
    <div class="col-md-3 col-xs-6 border">p3</div>
    <div class="col-md-3 col-xs-6">p4</div>
</div>
<div class="row">        
    <div class="col-md-3 col-xs-6 border">p5</div>
    <div class="col-md-3 col-xs-6 border">p6</div>
    <div class="col-md-3 col-xs-6 border">p7</div>
    <div class="col-md-3 col-xs-6">p8</div>
</div>

演示：http://bootply.com/93453

根据设备显示不同的网格

2 个答案: