Question

如果内容足够宽，可以将所有内容放在同一行而不会断行（可能需要使用代码段整页），则右侧标签文本的对齐方式略高于左侧标签文本。我试图让两个标签的文本与同一基线对齐。

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

当然我可以设置一个固定的保证金，但有没有一个响应的方式来做到这一点？

＆＃13;

.main {
  margin-top: 20px;
}

#left-input {
  width: 100px;
}

.vmiddle {
  /* does nothing ? */
  vertical-align: middle;
}

＆＃13;

<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>

＆＃13;

Answer 1

由于第二个技术上不是标签，因此您可以使用Bootstrap的Static form control instead。它旨在与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>

Answer 2

添加一个margin实用程序类，它是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>

Answer 3

烨。
首先，为正确的标签指定一个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;
  }

}

在您的布局中可能无法实现的另一个想法是限制内容的宽度，以便它永远不会足够宽。

Answer 4

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

＆＃13;

<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>

＆＃13;

如何对齐那些没有输入的Bootstrap内联表单标签？

4 个答案: