引导 3 网格 col-lg-3 到 col-xs-2，即 4x1 到 2x2 网格

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

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

Col-LG-3 表示其宽度为 3/12。所以如果你想要 2 行，你需要 col-lg-6。

xs 也是如此：

Col-XS-3 表示其宽度为 3/12。所以如果你想在 xs 屏幕上有 2 行，你需要 col-xs-6。

Answer 2

引导网格系统有 12 个网格。因此，您应该编写col-xs-6而不是col-xs-2，以便在一行上有 2 张图像。