0

Bootstrap 3 を使用して水平フォームとインライン フォームを組み合わせようとしていますが、うまくいきません。私がやろうとしていることは次のとおりです。

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

請求書の日付と顧客は、典型的な水平方向のコントロールです。そしてアイテムは表形式のデータで、フォームインラインクラスが使えると思います。

水平フォームとインライン フォームを組み合わせた経験のある人はいますか?

4

2 に答える 2

2

正しい方向に向けてくれたショーンに感謝します。私は以下を使用して終了しました：

<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 に答える
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 に答える