如何增加列之间的间距?

我有两列:

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

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

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

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

当前回答

很简单。你必须添加固体边界右，左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;
}

2015-09-13 18:09:33

其他回答

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

2020-04-01 16:14:27

在冷-md-?，创建另一个div，把图片放在那个div，然后你可以很容易地添加填充像这样。

<div class="row">
  <div class="col-md-8">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>
  <div class="col-md-4">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>   
</div>

<style>
  thumbnail{
     padding:4px;
           }
</style>

2016-07-14 03:54:25

引导4

文档说(这里):

行是列的包装器。每个列都有水平填充(称为沟槽)，用于控制它们之间的空间。然后在具有负边距的行上抵消此填充。通过这种方式，列中的所有内容在视觉上都在左侧对齐。

所以正确答案是:设置cols' padding-left/right = - row's margin-left/right。那么简单。

#my-row {
  margin-left: -80px;
  margin-right: -80px;
}

#my-col {
  padding-left: 80px;
  padding-right: 80px;
}

演示:https://codepen.io/frouo/pen/OqGaWN

2019-05-24 15:49:07

你可以使用带有边框属性的背景剪辑和盒子模型

.box{
  box-sizing: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}

<div class="row">
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
</div>

2016-06-01 10:39:24