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">使用

＆＃13;

<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>

＆＃13;

Answer 2

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

所以最好的方法是在你的行上添加top-buffer课程。

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

此处为codepen：https://codepen.io/boydow/pen/ayZeGW

Answer 3

您可以将“mt-＃”类添加到div中以添加上边距，其中＃是1-5之间的数字，长度各不相同。如果要在顶部和底部添加边距，可以执行“my-＃”。该类是Bootstrap文档的一部分。

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

Answer 4

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

Bootstrap方式在字段之间添加垂直空间

4 个答案: