我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
引导4，文件自定义。SCSS您可以添加以下代码:
$grid-gutter-width-base: 20px;
$grid-gutter-widths: ( xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
);
默认$grid-gutter-width-base: 30px;
其他回答
引导4，文件自定义。SCSS您可以添加以下代码:
$grid-gutter-width-base: 20px;
$grid-gutter-widths: ( xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
);
默认$grid-gutter-width-base: 30px;
<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>
<div class="col-md-6">
<div class="inner">
<!-- Put the col-6 elements in the inner div -->
</div>
</div>
默认情况下，这在外部div中提供了一些填充，这是您需要的方式。此外，您还可以使用自定义CSS修改填充。
我也面临着同样的问题;下面的方法对我很有效。
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Some Content..
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Some Second Content..
</div>
</div>
</div>
这将自动在两个div之间渲染一些空间。
由于您正在使用Bootstrap，列间距属性将有助于实现。W3Schools Column-Gap for Bootstrap有关于如何使用它的文档。
CSS:
.col-gap {
column-gap: 2rem;
}
对于HTML，将类(col-gap)放在行div中。 但也要注意，这可能会影响col-md-6的间距(或其他大小)，因此为了补偿，需要减小每列的大小。 (即col-md-6 -> col-md-5，即使只有2列)
HTML:
//Row
<div class="row col-gap justify-content-center">
//Col 1
<div class="col-md-5 ms-3 card p-5">
<p>Div 1</p>
</div>
//Col 2
<div class="col-md-5 ms-3 card p-5">
<p>Div 2</p>
</div>
</div>
