行内两个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">