我有两列:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

我怎么在它们之间加一个空格?

输出只是两个相邻的列,占据了整个页面的宽度。假设宽度设置为1000px,那么每个div将是500px宽。

如果我想在两者之间有一个100px的空间,我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。


当前回答

我不认为你能做到这与Bootstrap单独。列与列之间的空间会自动添加/维护。 如果你需要在列之间添加一个特定的宽度,你可以做这个技巧来模拟空间:https://jsfiddle.net/loginet/3rogbh9s/5/

<div class="row">
    <div class="col-6">
        <div class="left-column">Left column</div>
    </div>
    <div class="col-6">
        <div class="right-column">Right column</div>
    </div>
</div>

和CSS

.left-column {
    padding: 10px;
    padding-right: 50px;
    background: white;
}

.right-column { 
    padding: 10px;
    padding-left: 50px; 
    background: white;  
}

其他回答

在最新的引导版本中,您可以使用“卡片”

我也面临着同样的问题;下面的方法对我很有效。

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

这将自动在两个div之间渲染一些空间。

使用bootstrap的.form-group类。你的情况是这样的:

<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>

我在列之间的空间方面也遇到过类似的问题。根本问题是自举3和4中的列使用填充而不是边距。所以相邻两列的背景色彼此接触。

我找到了一个适合我们的问题的解决方案,它很可能适用于大多数试图分隔列并保持与网格系统其余部分相同的沟槽宽度的人。

这是我们想要的最终结果

列与列之间的阴影是有问题的。我们不希望列与列之间有额外的空间。我们只是想让排水沟是“透明的”,这样场地的背景色就会出现在两根白色柱子之间。

这是这两列的标记

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

这种方法确实需要一个带负边距的内部div,就像“row”类引导程序使用的那样。这个div,我们称之为“raise -block”,必须是列的直接兄弟

这样,您仍然可以在列中获得适当的填充。我见过通过创建空间来工作的解决方案,但不幸的是,他们创建的列在行两侧有额外的填充,因此最终使行变得更薄,网格布局是为之设计的。如果你想要看到你想要的样子,这意味着两列加在一起会比上面的一列更小,这打破了网格的自然结构。

这种方法的主要缺点是它需要额外的标记来包装每列的内容。对我们来说,这是可行的,因为只有特定的列之间需要空间来实现所需的外观。

用css添加一个与背景颜色相同的边框怎么样?我是新手,所以也许有一个很好的理由不这样做,但当我尝试它时,它看起来很好。