Question

假设我的表单布局需要与两列都内联

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对内容进行居中对齐，或者只使列与高度相等。

在您的行中添加一个类.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>

Bootstrap：设置col 1`标签并显示内联col 2`标签和输入`

1 个答案: