Question

以下是我的问题的简化版本：

.select-trigger,
.select-trigger:focus {
  min-height: 34px;
  line-height: 2.45;
  border-color: #ccc;
}
.select-trigger {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  background-color: #ffffff;
}
/* added rule */

.form-inline .select {
  display: inline-block;
  min-width: 180px;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <form class="form-inline">

    <div class="form-group">
      <label>Label 1</label>
      <div class="select">
        <div class="select-trigger">

        </div>
      </div>
    </div>

    <div class="form-group">
      <label>Label 2</label>
      <input type="text" class="form-control">
    </div>

    <div class="form-group">
      <label>Label 3</label>
      <div class="select">
        <div class="select-trigger">
          Foo
        </div>
      </div>
    </div>

  </form>
</body>

</html>

（如果视口不够大，也许Label 2不会出现在一行中，所以这里有一个JsBin可以全屏查看： http://jsbin.com/sobupicire/3/edit?output）

标签1 是问题：标签位于div的底部。它应该位于div.select
标签2 是理想的外观
标签3 与标签1相同，但有一些文字看起来应该是这样（标签位于div.select的垂直中间

Answer 1

对所有标签使用“label-control”和“form-control”

http://jsbin.com/calaconidu/1/edit?output

Answer 2

问题是一个输入是一个选择触发器，另一个是带有内容的选择触发器，而另一个是输入框。尝试并保持一致，这将解决您的问题

内联表单标签对齐

2 个答案: