引導：設置第1欄'標籤和第2欄第`標籤和input`

Question

display`直列說我有窗體佈局需要有兩列

LabelFor DisplayNameFor | LabelFor DropDownListFor 

我可以得到我的LabelFor到DropDownListFor是直列正確顯示（內聯），但是現在我的左欄已經沒有用了，因爲左欄沒有輸入，所以找不到任何匹配右欄的內容。

還有更好的方法來解決這個問題，而不是改變填充？

代碼：

<div class="row"> 
<div class="col-md-3"></div> 
<div class="col-md-3"> 
    <div class="form-inline"> 
     <div class="form-group"> 
      <label>label 1</label> 
      <label>display read only for label 1</label> 
     </div> 
    </div> 
</div> 
<div class="col-md-3"> 
    <div class="form-inline"> 
     <div class="form-group"> 
      <div class="pull-left"> 
       <label>label 2</label> 
       <select class="form-control">select stuff</select> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

你可以使用Flexbox的居中對齊的內容，或者只是讓列高度相等。

將添加到您的行中，然後在此類上設置display: flex。 使用align-items會將列內容垂直居中到最高列的高度。省略此設置將使列實際上等高。

.col-xs-3 { 
 
    border: 1px solid red; 
 
} 
 
.row-eq-height { 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row row-eq-height"> 
 
    <div class="col-xs-3"></div> 
 
    <div class="col-xs-3"> 
 
    <div class="form-inline"> 
 
     <div class="form-group"> 
 
     <label>label 1</label> 
 
     <label>display read only for label 1</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
    <div class="form-inline"> 
 
     <div class="form-group"> 
 
     <div class="pull-left"> 
 
      <label>label 2</label> 
 
      <select class="form-control">select stuff</select> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-3"></div> 
 
</div>