如何将文本字段与其标签和按钮垂直对齐答案

【问题标题】：How to vertically align text field with it's label and button如何将文本字段与其标签和按钮垂直对齐
【发布时间】：2019-06-18 23:24:43
【问题描述】：

我基本上是在尝试这种布局：

标签文本框按钮

例如：份数 [5 ] [添加]

认为这真的很简单。但是我现在已经挣扎了几个小时，这是我最接近的一次，这绝对是可怕的：

这是我的代码：

<div class="row col-md-12">
            <form class="form-inline pull-right">
                <div class="form-group">
                    <label for="numberOfCopies">Number of copies</label>
                    <input size="1" type="text" class="form-control" id="numberOfCopies">
                    <button type="submit"  class="btn btn-primary">Add</button>
                </div>
            </form>
        </div>

【问题讨论】：

标签： twitter-bootstrap-3 angular-ui-bootstrap

【解决方案1】：

首先是一些 Bootstrap-Basics：

你的“row-div”应该被一个“container-div”包裹起来
row 和 col-xx-x 类需要在自己的 div 标签上

正如您在下面的示例中看到的那样，您可以使用 css 轻松完成此操作。

使用display: flex;，我们可以并排获得表单组的所有元素。
使用white-space: nowrap，我们“告诉”标签仅显示为一行。
使用margin-标签，我们将把元素放到正确的位置。

要了解更多信息，请查看 display、white-space 和 margin 的文档。

我认为usage of input-groups 也可能很有趣。如果有任何不清楚的地方，请随时询问每条评论。

.form-group.flex {
  display: flex;
}

.form-group.flex label {
  white-space: nowrap;
  margin-top: 7px;
}

.form-group.flex input {
  margin: 0 7px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline pull-right">
        <div class="form-group flex">
          <label for="numberOfCopies">Number of copies</label>
          <input size="1" type="text" class="form-control" id="numberOfCopies">
          <button type="submit" class="btn btn-primary">Add</button>
        </div>
      </form>
    </div>
  </div>
</div>

【讨论】：