html - 如何将输入标签居中并连续输入？

Question

我有这个代码:

<div class="well">
    <form role="form" id="shop-order" method="post" action="">
        <div class="row">
            <div class="form-group">
                <div class="col-md-3">
                    <div class="pull-right">
                        <label for="name">Label</label>
                    </div>
                </div>
                <div class="col-md-6">
                    <select class="form-control" name="clientId">
                        $options
                    </select>
                </div>
            </div>
        </div>
        // possibly other rows...
</div>

这段代码的结果在这张图片上:

我不明白如何将标签和输入居中。我希望它们在一条线上:标签中间与输入中间相对。

我该怎么做？或者我的 html 可能是错误的，这可以通过正确的 html 来实现？

我正在寻找 Bootstrap 方法，据我所知，它可以通过 line-height 实现. 我会在 line-height 之前完成如果我找不到 Bootstrap 解决方案。所以我正在寻找 Bootstrap 解决方案。

JSFiddle demo

Answer 1

Bootstrap 提供了一种Horizo​​ntal Forms 样式，看起来就像您正在寻找的样式:http://getbootstrap.com/css/#forms-horizontal

工作 fiddle :http://jsfiddle.net/Nv9Q5/1/

代码:

<div class="well">
  <form class="form-horizontal">
      <div class="form-group">
          <label for="name" class="col-sm-2 control-label">ФИО Клиента</label>
          <div class="col-sm-10 col-md-10">
              <select class="form-control" name="clientId">
                  <option>one</option>
              </select>
          </div>
      </div>
  </form>
</div>