2

Bootstrap 3 の小さなフォームを作成するには?

例 1:

<div class="well">

    <div class="form-group row">
        <div class="col-lg-2">
            <label for="city" class="control-label">City</label>
            <input type="text" class="form-control" id="city"/>
        </div>
    </div>

    <label for="price" class="control-label">Price</label>
    <div class="form-group row" id="price">
        <div class="col-lg-1">
            <input type="text" class="form-control" />
        </div>
        <div class="col-lg-1">
            <input type="text" class="form-control"/>
        </div>
    </div>

</div>

仕事です。しかし、追加する<div class="col-lg-3">と、フォームが正しく表示されません。

例 2:

<div class="col-lg-3">
    <div class="well">

    <div class="form-group row">
        <div class="col-lg-2">
            <label for="city" class="control-label">City</label>
            <input type="text" class="form-control" id="city"/>
        </div>
    </div>

    <label for="price" class="control-label">Price</label>
    <div class="form-group row" id="price">
        <div class="col-lg-1">
            <input type="text" class="form-control" />
        </div>
        <div class="col-lg-1">
            <input type="text" class="form-control"/>
        </div>
    </div>

    </div>
</div>

私は何を間違っていますか？

4

1 に答える 1

11

次のコードを参照します。

<div class="col-lg-3">
    <div class="well">
      <div class="form-group row">
          <label for="city" class="col-lg-2 control-label">City</label>
          <div class="col-lg-10">
              <input type="text" class="form-control" id="city" />
          </div>
      </div>

      <div class="form-group row" id="price">
          <label for="price" class="col-lg-2 control-label">Price</label>
          <div class="col-lg-5">
              <input type="text" class="form-control" />
          </div>
          <div class="col-lg-5">
              <input type="text" class="form-control"/>
          </div>
      </div>
    </div>
</div>
于 2013-08-31T17:53:38.350 に答える