我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
我知道这篇文章有点过时，但我遇到了同样的问题。我的html的例子。
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label asp-for="FirstName" class="control-label"></label>
<input asp-for="FirstName" class="form-control" />
<span asp-validation-for="FirstName" class="text-danger"></span>
</div>
</div>
<div class="col-xs-3">
<div class="form-group">
<label asp-for="LastName" class="control-label"></label>
<input asp-for="LastName" class="form-control" />
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
</div>
</div>
为了在组之间创建空间，我在site.css文件中通过减少5的负边距来覆盖bootstrap的-15px的边距。
我是这么做的……
.form-group {
margin-right: -10px;
}
我希望这能帮助到其他人。
其他回答
您可以使用此处文档中的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
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 >
我也面临着同样的问题;下面的方法对我很有效。
<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单独。列与列之间的空间会自动添加/维护。 如果你需要在列之间添加一个特定的宽度，你可以做这个技巧来模拟空间:https://jsfiddle.net/loginet/3rogbh9s/5/
<div class="row">
<div class="col-6">
<div class="left-column">Left column</div>
</div>
<div class="col-6">
<div class="right-column">Right column</div>
</div>
</div>
和CSS
.left-column {
padding: 10px;
padding-right: 50px;
background: white;
}
.right-column {
padding: 10px;
padding-left: 50px;
background: white;
}
由于您正在使用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>
