html - 在不影响网格布局的情况下在两列之间创建边距

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%;
}