Bootstrap 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>

Fiddle: http://jsfiddle.net/41ry7qvk/

Answer 1

bootstrap 网格系统有 12 个网格。所以你应该写 col-xs-6 而不是 col-xs-2 来连续显示 2 张图像。

Answer 2

Bootstrap 正在处理一个分成 12 个部分的网格。

col-lg-3 表示它的宽度是 3/12。所以如果你想要 2 行你需要 col-lg-6.

xs 相同：

col-xs-3 表示它的宽度是 3/12。所以如果你想在 xs-screen 上显示 2 行，你需要 col-xs-6.

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

Bootstrap 3 Grid col-lg-3 to col-xs-2 i.e. 4x1 to 2x2 grid

html

grid

responsive-design

twitter-bootstrap-3