引导:设置第1栏'标签和第2栏第`标签和input`
问题描述:
display`直列说我有窗体布局需要有两列引导:设置第1栏'标签和第2栏第`标签和input`
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的居中对齐的内容,或者只是让列高度相等。
将添加到您的行中,然后在此类上设置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>
哦,我喜欢这个有很多,谢谢!应该提交这个引导:) – Pakk