如何在bootstrap3中进行此布局？

Question

我尝试使用以下代码，但不能为每个框添加相同的边距

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 box"></div>
    </div>
    <div class="row">
        <div class="col-xs-6 box"></div>
        <div class="col-xs-6 box">
            <div class="row">
                <div class="col-xs-12 box"></div>
            </div>
            <div class="row">
                <div class="col-xs-12 box"></div>
            </div>
        </div>
    </div>
</div>

Answer 1

行之间的空格

对于那么多垂直空间，没有任何内置的（对于版本3，根据提供的标签），因此您需要坚持使用自定义类。

<强> HTML

<div class="row vertical-space">
    ...
</div>

<强> CSS

.vertical-space{
    margin-bottom: 15px;
}

请注意，如果您要将这些图片作为background-image的CSS <div class="row">放置，则需要在上面的代码段中替换padding宽度margin。< / p>

列之间的空格

您应该在内部容器上使用padding以获得列之间的空间。

<强> HTML

<div class="col-xs-6 box">
    <div class="row horizontal-space">
        ...
    </div>
</div>

<强> CSS

.horizontal-space{
    padding: 0 15px;
}

Answer 2

所有引导列都有15个像素左右填充，行的边距为-15像素。

这意味着默认情况下，列之间的间距为30像素，但两端的列的外边缘将偏移到行中。

你可以做的是从每个盒子中移除右边（或左边）填充，但是你需要调整行以确保填充被补偿或者它将导致水平滚动。您还需要在每个框的底部添加15个像素以获得垂直间隙。见下文。

<div class="container-fluid">
    <div class="row box-row">
        <div class="col-xs-12 box"></div>
    </div>
    <div class="row box-row">
        <div class="col-xs-6 box"></div>
            <div class="col-xs-6 box">
            <div class="row box-row">
                <div class="col-xs-12 box"></div>
            </div>
            <div class="row box-row">
                <div class="col-xs-12 box"></div>
            </div>
        </div>
    </div>
</div>

而css就是这样。

.box-row {
    margin-right:0;
}
.box {
    padding-right:0;
    padding-bottom:15px;
}