代码之家 › 专栏 › 技术社区 › kaka1234

使用bootstrap 3进行表单控件对齐

twitter-bootstrap-3 css html

kaka1234 · 技术社区 · 6 年前

这可能是我所缺少的简单的东西,但我无法接受。我正在应用程序中使用引导程序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/

请忽略模态类,因为问题不在于我没有模态类,而是我的应用程序中的其他表单。

我试过调整和使用不同的班级,但似乎没有很好的调整。

2 回复 | 直到 6 年前

K K 6 年前

您需要参考以下文档中的水平表格部分: 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/

Md. Abu Sayed 6 年前

您可以在这里尝试此代码

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">


<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-10">
      <input type="text" class="form-control" id="name" placeholder="Email">
    </div>
  </div>

  <div class="form-group">
    <label for="inputEmail3" class="col-xs-2 control-label">Email</label>
    <div class="col-xs-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>

<div class="form-group">
    <label for="sex" class="col-xs-2 control-label">Sex</label>
    <div class="col-xs-10">
       <select name="sex" class="auto-width setup-inline form-control input-medium" required>
          <option value="">---Please select---</option>
          <option value="m">Male</option>
          <option value="f">Female</option>
       </select>
    </div>
</div>


  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10 text-right">
      <button type="submit" class="btn btn-success">Submit</button>
    </div>
  </div>
</form>