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

以Form-Inline对齐标签和文本框

1 个答案: