引导：设置第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>