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

时间:2014-11-19 09:05:56

标签: html css twitter-bootstrap

在我的页面正文中,我将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;
}

1 个答案:

答案 0 :(得分:1)

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

<强> DEMO

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

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