html - 在 Form-Inline 中对齐标签和文本框

Question

我正在使用 Bootstrap 的网格系统并想创建一个内联表单。

这是我的:

<div class="container body-content">

  <form class="well form-inline" style="width: 100%;">

    <div class="row">
        <div class="form-group col-md-4">
          <label>Location:</label>
          <input type="text" class="form-control">
        </div>


        <div class="form-group col-md-4">
          <label>Assignment:</label>
          <input type="text" class="form-control">
        </div>

        <div class="form-group col-md-4">
          <label>Incident Number:</label>
          <input type="text" class="form-control">
        </div>
    </div>

    <br>
    <br>

    <div class="row">
        <div class="form-group col-md-4">
          <label>Date:</label>
          <input type="text" class="form-control">
        </div>

        <div class="form-group col-md-4">
          <label>Training:</label>
          <input type="text" class="form-control">
        </div>

        <div class="form-group col-md-4">
          <label>Example:</label>
          <input type="text" class="form-control">
        </div>
    </div>

</form>

</div>

运行时，文本框或标签没有结构或对齐方式。我怎样才能做到这一点？

Here is a bootply

Answer 1

对于每个标签和输入，你应该制作这个结构:

<div class="form-group col-md-4">
     <label class="col-lg-4 control-label">Location:</label>
     <div class="col-lg-8">
          <input type="text" class="form-control">
     </div> 
</div>

这将使它与网格系统一起工作

See bootply