Question

我正在尝试使用Bootstrap 3组合水平和内联表单而没有运气。我想做的是：

Invoice date:  [      ]
Customer:      [                                  V]
Items:         [product     V] [amount ] [quantity ]
               [product     V] [amount ] [quantity ]

发票日期和客户是典型的水平控制。而item是表格数据，我认为可以使用form-inline类。

任何经历过水平和内联形式的人都会有一些提示吗？

Answer 1

我会这样做：http://bootply.com/93346

<div class="container">
  <div class="row">
    <div class="col-sm-2">
      <label>Invoice Date</label>
    </div>
    <div class="col-sm-2">
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2">
      <label>Customer</label>
    </div>
    <div class="col-sm-6">
      <select class="form-control">
        <option>select</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2">
      <label>Items</label>
    </div>
    <div class="col-sm-2">
      <select class="form-control">
        <option>select</option>
      </select>
    </div>
    <div class="col-sm-2">
      <input type="text" class="form-control">
    </div>
    <div class="col-sm-2">
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2 col-sm-offset-2">
      <select class="form-control">
        <option>select</option>
      </select>
    </div>
    <div class="col-sm-2">
      <input type="text" class="form-control">
    </div>
    <div class="col-sm-2">
      <input type="text" class="form-control">
    </div>
  </div>
</div>

Answer 2

感谢Sean指出我正确的方向。我最终使用了以下内容：

<forn action="/invoice" method="post" class="form-horizontal">
    <div class="form-group ">
        <label for="invoiceDate" class="control-label col-lg-2 required">Date</label>
        <div class="col-lg-2">
            <input name="date" class="form-control" />
        </div>
    </div>
    <hr />
    <div class="form-group">
        <label class="control-label col-lg-2 required">Item 1</label>
        <div class="col-lg-10">
            <div class="row">
                <div class="col-sm-8">
                    <select class="form-control">
                        <option>select</option>
                    </select>
                </div>
                <div class="col-sm-2">
                    <input type="text" class="form-control">
                </div>
                <div class="col-sm-2">
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-lg-2 required">Item 2</label>
        <div class="col-lg-10">
            <div class="row">
                <div class="col-sm-8">
                    <select class="form-control">
                        <option>select</option>
                    </select>
                </div>
                <div class="col-sm-2">
                    <input type="text" class="form-control">
                </div>
                <div class="col-sm-2">
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
    </div>
    ..

使用Bootstrap 3组合水平和内联表单

2 个答案: