1

我正在使用 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 个元素有一个名为边框的类（我想用垂直线分隔它们）

所以我在 LG 和 MD 屏幕上看到的是这样的：

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

我想要的 SM 和 XS 屏幕是这样的：

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

我怎样才能做到这一点？

4

2 回答 2

0

您需要为 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

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

<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 在运行时修改类名，方法是先进行一些计算。

于 2013-11-11T14:41:23.097 回答
0

您可以使用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

于 2013-11-11T15:21:31.290 回答