html - CSS:使用 bootstrap 3 的表单控件对齐

Question

这可能是我所缺少的简单内容，但我无法理解。我在我的应用程序中使用 bootstrap 3。在我的表单中，我有一些控件，如下拉菜单、文本框、标签等。请参见下面的示例:

<div class="modal-body">
<form role="form" name="form" class="form-body">
    <div class="form-group"> 
        //form label here
        <div class="m-grid-col-sm-5">               
           //form element here
        </div>
    </div>
</form>
<div>

以上只是一个例子。问题是当我运行我的应用程序时，我可以看到标签始终位于控件上方。我想要的是左边的标签和右边的表单控件(下拉列表、文本框等)。

您可以看到我在以下位置创建了一个示例 jsfiddle: https://jsfiddle.net/aman1981/xprh2tno/8/

请忽略模态类，因为问题不是我遇到的不是模态，而是我应用程序中的其他形式。

我试过调整和使用不同的类，但看起来调整得不太好。

Answer 1

您需要在此处引用文档中的水平表单部分:http://bootstrapdocs.com/v3.0.3/docs/css/#forms

HTML:

  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox"> Remember me
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </form>

演示:https://jsfiddle.net/xprh2tno/12/