我有两列:

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

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

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

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


当前回答

引导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

其他回答

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

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

您可以使用此处文档中的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

引导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

在冷-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>

你可以使用colx -xs-*类来实现列与列之间的间隔,在下面编码的colx -xs-* div中。间距是一致的,这样所有的列都能正确对齐。为了获得均匀的间距和列大小,我将执行以下操作:

<div class="container">
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
</div>