我有两列:

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

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

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

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


当前回答

<div class="row">

  <div class="col-sm-6">
    <div class="card">
        Content one
    </div>
  </div>

  <div class="col-sm-6">
    <div class="card">
        Content two
    </div>
  </div>

</div>

其他回答

很简单。你必须添加固体边界右,左col-* 它应该是工作…:)

它看起来像这样:http://i.stack.imgur.com/CF5ZV.png

HTML:

<div class="row">
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
</div>

CSS:

div#services_block {
   height: 355px;
   background-color: #33363a;
   border-left:3px solid white;
   border-right:3px solid white;
}

您可以使用此处文档中的col-md-offset-*类来实现列之间的间距。间距是一致的,这样所有的列都能正确对齐。为了获得均匀的间距和列大小,我将执行以下操作:

<div class="row">
  <div class="col-md-5"></div>
  <div class="col-md-5 col-md-offset-2"></div>
</div>

在Bootstrap 4中使用:offset-2或offset-md-2

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

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

这将允许两列之间有一个空间,显然,如果你想改变默认宽度,你可以使用mixins来修改默认的引导宽度。或者,您可以使用内联CSS样式给出宽度。

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>

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