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这样的类以百分比定义元素的宽度（col-xs-8表示超小视口及以上页面的66％），并且使用12的倍数。

填充/边框是这种方法的一个问题，因为列通常还有fixed padding，这会在列之间创建“排水沟”。我添加了一个.no-padding课来帮助解决这个问题。正如你在我的例子中所看到的，它仍然没有很好的排列。

查看网格系统上的Bootstrap documentation以获取更多详细信息。

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

1 个答案: