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

如何在div之间添加垂直空间。有没有可以在这里添加的引导类？有什么帮助吗？Bootstrap方式在字段之间添加垂直空间

下面是我的代码片段：

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

来源

2017-08-02 beginner

[Twitter的引导 - 添加行之间顶部空间]的可能的复制（https://stackoverflow.com/questions/10085723/twitter-bootstrap-add-top-space-between-rows） –

有在引导工具箱无类做这个。

因此，最好的方法是在您的行上添加top-buffer类。

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

这里codepen：https://codepen.io/boydow/pen/ayZeGW

来源

2017-08-02 13:06:35

您需要使用<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>

来源

2017-08-02 13:06:29

您可以添加类的“MT-＃”或您的div添加上边距，其中＃为1-5之间的一个数字，在不同长度。如果你想在上面和下面添加边距，你可以做“my-＃”。这个类是Bootstrap文档的一部分。

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

来源

2017-08-02 13:52:31

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

回答

相关问题