如何将没有输入框的Bootstrap内联表单标签与具有输入框的标签对齐？

Question

当内容足够宽，可以在同一行上显示而不需要换行时（可能需要使用代码段的全页面），右侧标签文本的对齐位置略高于左侧标签文本。我试图让两个标签的文本对齐到相同的基线。

我尝试过以各种方式使用垂直对齐，尝试将右侧组的高度设置为与左侧相同，但是我无法使任何东西正常工作。

当然，我可以设置固定的边距，但是否有一种响应式的方法来做到这一点？

.main {
  margin-top: 20px;
}

#left-input {
  width: 100px;
}

.vmiddle {
  /* does nothing ? */
  vertical-align: middle;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
  <div class="row">

    <div class="col-xs-6 ">
      <div class="form-inline">
        <div class="form-group">
          <label>Left Label:</label>
          <input id="left-input" type="text" class="form-control" value="Some Value" />
        </div>
      </div>
    </div>

    <div class="col-xs-6 vmiddle">
      <div class="form-inline">
        <div class="form-group">
          <label>Right Label: Higher</label>
        </div>
      </div>
    </div>

  </div>
</div>

- dlumpp

Answer 1

由于第二个不是技术上的标签，你可以使用Bootstrap的静态表单控制。它被设计成与form-control和.btn元素对齐。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
  <div class="row">

    <div class="col-xs-6 ">
      <div class="form-inline">
        <div class="form-group">
          <label>Left Label:</label>
          <input id="left-input" type="text" class="form-control" value="Some Value" />
        </div>
      </div>
    </div>

    <div class="col-xs-6 vmiddle">
      <div class="form-inline">
        <div class="form-group">
          <p class="form-control-static"><strong>Right Label</strong></p>
        </div>
      </div>
    </div>

  </div>
</div>

- Tigran Petrossian

---

我知道一定有一个好的内置类我错过了。我知道我指定了标签，但这并不是必要的。这正是我需要的，谢谢！ - dlumpp

@dlumpp 不用谢。带有提到的类的“标签”也可以使用，但如果实际上不是标签，则使用“标签”不是一个好习惯；这会给屏幕阅读器用户带来很多困惑。 - Tigran Petrossian

Answer 2

是的。尝试移除 <label>Right Label: Higher</label> 的底部边距。如果这不起作用，请留下评论。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
  <div class="row">

    <div class="col-xs-6 ">
      <div class="form-inline">
        <div class="form-group">
          <label>Left Label:</label>
          <input id="left-input" type="text" class="form-control" value="Some Value" />
        </div>
      </div>
    </div>

    <div class="col-xs-6 vmiddle">
      <div class="form-inline">
        <div class="form-group">
          <label style="margin-bottom: 0;">Right Label: Higher</label>
        </div>
      </div>
    </div>

  </div>
</div>

- Blues Clues

Answer 3

添加一个边距实用类，其大小为Bootstrap填充的一半。

<style>
    .m-t-7 {
        margin-top: 7.5px;
    }
</style>

<div class="col-xs-6">
    <div class="form-inline">
        <div class="form-group">
            <label class="m-t-7">Right Label: Higher</label>
        </div>
    </div>
</div>

- timgavin

Answer 4

没错。
首先，给正确的标签一个ID，这样你就可以单独选择它。

<label id="right">Right Label: Higher</label>

然后，在你的 CSS 中添加：

#right{
  padding-top:2px; /*Insert your own value for paddin*/
}

为了使其动态化，当左侧标签堆叠时，请删除填充。找到浏览器此时的像素宽度，然后为事件创建媒体查询：

@media(max-width:300px){

  #right{
    padding-top:0;
  }

}

另一个想法可能在您的布局中不可行，那就是限制内容的宽度，使其永远不会变得足够宽。

- Patrick_design