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方式在字段之間添加垂直空間

回答

相關問題