说我的表单布局需要与两列都内联
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>
您可以使用flexbox将内容居中对齐，或者仅使列相等的高度。
将一个类添加.row-eq-height到您的行中，然后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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句