css - 引导程序 3 形式

Question

如何为 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>

我究竟做错了什么？

Answer 1

浏览以下代码：

<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>