0

I'm trying to combine horizontal and inline form using Bootstrap 3 without luck. What I'm trying to do is:

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

Where invoice date and customer are typical horizontal controls. And items is tabular data for which I think form-inline class can be used.

Anyone experienced combining horizontal and inline form and has some tips for me?

4

2 回答 2

2

我会做这样的事情：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>
于 2013-11-11T02:44:39.517 回答
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>
    ..
于 2013-11-11T20:01:19.727 回答