我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
使用bootstrap的.form-group类。你的情况是这样的:
<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
其他回答
引导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="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-sm-6">
<div class="card">
Content one
</div>
</div>
<div class="col-sm-6">
<div class="card">
Content two
</div>
</div>
</div>
根据Bootstrap 4文档，你应该给父元素一个负边距mx-n*，给子元素一个正边距px-*
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="row mx-n5"> <div class="col px-5"> <div class="p-3 border bg-light">自定义列填充</div> < / div > <div class="col px-5"> <div class="p-3 border bg-light">自定义列填充</div> < / div > < / div >
Bootstrap col稍微使用了一些左边和右边的空间。我刚刚添加了一个块元素，如div，并设置了边界的差异。此外，添加一些额外的填充或空白在额外的div将工作完美。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> < br > < br > < div class = "容器" > < div class = "行" > <div class="col-6 "> <div class="border - border-danger "> < h2 class = " text-center " > < / h2 > 1 < / div > < / div > < div class = " col-6”> <div class="border - border-warning"> < h2 class = " text-center " > < / h2 > 2 < / div > < / div > < / div > < / div >
