时间戳

首页 > 解决方案 > CSS：使用引导程序 3 的表单控件对齐

html - CSS：使用引导程序 3 的表单控件对齐

问题描述

这可能是我想念的简单事情，但我无法理解。我在我的应用程序中使用引导程序 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/

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

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

标签： htmlcsstwitter-bootstrap-3

解决方案

您需要在此处参考文档中的水平表单部分：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/

推荐阅读