css - 一行内两个 col-sm-6 之间的间距/间隙，并将其与页面的其余部分对齐

Question

我试图在一行内的 2x col-sm-6 之间留出一些空间/间隙。已经从 Stack Overflow 的早期帖子中尝试了一些方法，但似乎没有一个能产生正确的结果。

我尝试过的:

<div class="row">
    <div class="col-sm-6">
        <div class="col-md-12 contentpage3">            
        </div>
    </div>
    <div class="col-sm-6">
        <div class="col-md-12 contentpage3">
        </div>
    </div>
</div>

好吧...这创建了正确的间距，但是左侧和右侧并不与页面内容的其余部分对齐。为了帮助你们理解我要解释的内容，这里有一张图片。

在这里你可以看到上面的白色内容，宽度是我试图为页面内的所有元素保留的宽度。我知道这是因为我添加了额外的 div，因为下面的代码正在生成您在图片中看到的上面的白色内容框，但是没有间距。也尝试过使用 col-md-5 和 2 的偏移量，但这会产生太大的间距。

<div class="row">
    <div class="col-sm-6 contentpage3">
    </div>
    <div class="col-sm-6 contentpage3">
    </div>
</div>

我做错了什么？

Answer 1

你可以这样做。

所有 .col-* 元素都应该在行元素内。

所有.col-*元素都应该包含内容，而不是内容。

.example {
    padding-bottom: 15px;
    background: #ccc;
}
.example > .row > div {
    margin-top: 15px;
}
.example .inside {
    height: 50px;
    background: #fff;
    border: 1px solid #eee;
}

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">