我有两列:

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

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

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

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


当前回答

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

其他回答

这也是一种方法。请查看以下网址https://jsfiddle.net/sarfarazk/ofgqm0sh/

<div class="container">
 <div class="row">
  <div class="col-md-6">
    <div class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="col-md-6">
    <div class="bg-warning">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    </div>
  </div>
</div>
</div>

Bootstrap 5提供了一种使用g-*类添加cols间隙的更舒适的方法

<div class="container">
  <div class="row g-2">
    <div class="col-6">...</div>
    <div class="col-6">...</div>
  </div>
</div>

文档:https://getbootstrap.com/docs/5.0/layout/gutters/

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

既然你在使用bootstrap,我猜你想让它有响应性。在这种情况下,你不应该使用固定的大小,例如'px'。

作为其他解决方案的变通方案,我建议将两列都设为“col-md-5”而不是“col-md-6”,然后在包含列的父元素“row”中,添加类“justice -content-between”,这将把空闲空间放在中间,就像你可以在bootstrap文档中检查的那样

当然,这个解决方案也适用于两列以上的调整“col-md-x”

希望能有所帮助;)

使用左边距是正确的方法:

<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>

完美的作品