css - 有两列占据全宽但带有分隔符

Question

嘿，我有以下 html 代码:

<div class='col-sm-7 foo'>...</div>
<div class='col-sm-5 foo'>...</div>

在我的 CSS 中:

.foo {
   background-color: white;
}

我无法在它们之间添加一些边距，因为它们由于 Bootstrap 而占据了整个宽度。虽然我想在它们之间添加一个没有背景颜色的分隔符(10px 左右)。我怎样才能做到这一点(出于其他原因我必须使用 Bootstrap )。

Answer 1

您可以编辑列边距的对齐方式，并使用填充进行偏移:

Demo Fiddle

<div class='col-sm-7 foo'>...</div>
<div class='col-sm-5 foo'>...</div>


.foo {
    background-color: white;
}

@media (min-width: 768px) {
    .foo:first-of-type {
        margin:0 5px 0 -5px;
        padding-left:20px;
    }
    .foo:last-of-type {
        margin:0 -5px 0 5px;
        padding-right:20px;
    }
}
body {
    background:black;
}