Question

我有一个以4列为一行的图像网格，我希望将其更改为两列的行。我认为这会做到：col-lg-3 col-xs-2但它并没有。

我哪里错了？

代码：

.test-content{
    width:100%;
    height:100px;
    background:lightblue;
}

<div class="row">

    <div class="col-lg-3 col-xs-2">
        <div class="test-content">content</div>
    </div>
    <div class="col-lg-3 col-xs-2">
        <div class="test-content">content</div>
    </div>

<!-- It's like I should have a closing div here for the first row, and open another row just for col-xs-2, but obviously I can't do this for col-lg-3 -->

    <div class="col-lg-3 col-xs-2">
        <div class="test-content">content</div>
    </div>
    <div class="col-lg-3 col-xs-2">
        <div class="test-content">content</div>
    </div>

</div>

小提琴：http://jsfiddle.net/41ry7qvk/

Answer 1

自举网格系统有12个网格。因此，您应该编写col-xs-2来代替col-xs-6，以便在一行中拥有2张图片。

Answer 2

Bootstrap正在使用分为12个部分的网格。

col-lg-3表示其宽度为3/12。因此，如果你想要2行，你需要col-lg-6。

xs：

相同

col-xs-3表示其宽度为3/12。因此，如果您想在xs屏幕上显示2行，则需要col-xs-6。

Bootstrap 3 Grid col-lg-3到col-xs-2，即4x1到2x2网格

2 个答案: