我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
<div class="col-md-6">
<div class="inner">
<!-- Put the col-6 elements in the inner div -->
</div>
</div>
默认情况下，这在外部div中提供了一些填充，这是您需要的方式。此外，您还可以使用自定义CSS修改填充。
其他回答
这将允许两列之间有一个空间，显然，如果你想改变默认宽度，你可以使用mixins来修改默认的引导宽度。或者，您可以使用内联CSS样式给出宽度。
<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
你可以使用带有边框属性的背景剪辑和盒子模型
.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>
你可以使用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>
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/
很简单。你必须添加固体边界右，左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;
}
