在两列之间创建边距而不影响网格布局

Question

在我的页面正文中，我将12列拆分为一个8列宽的正文和一个4列宽的侧栏。这两个区域与背景颜色不同，所以我希望它们看起来好像它们位于背景之上。问题是，当我在两个区域之间设置边距以使它们显示为2个单独的区域时，它会影响我的网站布局，因为现在我们有8列，4列和此边距，因此侧边栏被推到了内容。如何在不破坏bootstrap的网格布局的情况下添加这样的边距来分隔这两个区域？

编辑：我知道我可以嵌套它们并且基本上在两个区域之间添加一列，但我只想在这两个区域之间留出15px的边距。

代码：

<div class="container">
    <div class="row">
        <div id="content" class="main-content-inner col-sm-12 col-md-8 bg">
        </div>
        <div class="sidebar col-sm-12 col-md-4 bg">
        </div>
    </div>
</div>

.bg {
    background-color: #fff;
}

.sidebar {
    padding-top: 40px;
    border-left: 15px solid transparent;
}

Answer 1

您可以更改侧边栏的宽度并向其添加边距：

<强> DEMO

.bg {
    background-color: #fff;
    min-height:150px;
}

.sidebar {
    padding-top: 40px;
    width:31%;
    margin-left:2.3333%;
}