Bootstrap：3x3 网格，特色图片应为 2x2

Question

对不起，我完全被这个难住了。我正在努力了解如何构建以下内容：

我想创建一个简单的响应式图库，其中包含一个 3x3 网格，其中特色图像比其他图像大并且跨度为 2x2。

不确定我是否有道理。但我不知道如何将它们放在一起 bootstrap.

Answer 1

使用 Bootstrap 网格系统，您基本上可以做一些事情 like this:

<div class="container">
    <div class="row">
        <div class="col-xs-8 no-padding">
            <div class="featured-image"></div>
        </div>
        <div class="col-xs-4 no-padding">
            <div class="row">
                <div class="little-image"></div>
            </div>
            <div class="row">
                <div class="little-image"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-4 no-padding">
            <div class="little-image"></div>
        </div>
        <div class="col-xs-4 no-padding">
            <div class="little-image"></div>
        </div>
        <div class="col-xs-4 no-padding">
            <div class="little-image"></div>
        </div>
    </div>
</div>

CSS:

.featured-image {
    height: 400px;
    border: 10px solid white;

}
.little-image {
    height: 200px;
    border: 10px solid white;
}

body {
    background-color: black;
}

.no-padding {
    padding: 0 !important;   
}

像 col-xs-8 这样的 class 以百分比定义元素的宽度（col-xs-8 表示在超小视口及以上的页面上占页面的 66%），并与倍数一起使用共 12

Padding/borders 是这种方法的一个问题，因为列通常也有 fixed padding，这会在列之间创建 "gutters"。我添加了一个 .no-padding class 来帮助解决这个问题。正如您在我的示例中看到的那样，它仍然没有很好地排列。

查看网格系统上的 Bootstrap documentation 了解更多详情。

Bootstrap：3x3 网格，特色图片应为 2x2

Bootstrap: 3x3 grid, featured image should be 2x2

grid

gallery

twitter-bootstrap