在字段之间添加垂直空间的引导方式

Question

如何在div之间添加垂直空间。我可以在这里添加任何引导类吗？ 有什么帮助吗？

下面是我的代码片段：

<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-lg-4"> Project: </label>
<div class="col-lg-8">
@Html.TextBoxFor(model => model.detailsConfig.Project, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Project" })
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-lg-4">Quantity:</label>
<div class="col-lg-8">
@Html.TextBoxFor(model => model.detailsConfig.Quantity, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Quantity" })
</div>
</div>
</div>
</div>

Answer 1

你需要像这样使用<div class="form-group">作为父母

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label class="control-label col-lg-4"> Project: </label>
<div class="col-lg-8">
@Html.TextBoxFor(model => model.detailsConfig.Project, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Project" })
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label class="control-label col-lg-4">Quantity:</label>
<div class="col-lg-8">
@Html.TextBoxFor(model => model.detailsConfig.Quantity, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "Quantity" })
</div>
</div>
</div>
</div>
</div>

Answer 2

引导工具箱中没有类可以执行此操作。

因此，最好的方法是在行中添加一个top-buffer类。

.top-buffer{
margin-top: 40px;
}

这里的代码笔：https://codepen.io/boydow/pen/ayZeGW

Answer 3

您可以添加类 "mt-#" 或添加到您的div 以添加上边距，其中 # 是介于 1-5 之间的数字，长度不同。如果要在顶部和底部添加边距，可以执行"my-#"。此类是引导文档的一部分。

<div class="your-class mt-3">Your column</div>

Answer 4

你可以使用这个：<div class="d-flex align-content-around flex-wrap">

Answer 5

我刚刚发现了排水沟。它可以通过以下方式水平和垂直使用：

g-2
gx-2
gy-2

在此处阅读更多相关信息。