引导程序 3 形式答案

【问题标题】：Bootstrap 3 forms引导程序 3 形式
【发布时间】：2013-09-10 03:47:33
【问题描述】：

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

我做错了什么？

【问题讨论】：

请包含一个 jsfiddle。
添加到哪里？头还是尾？请多解释
你在问什么？你把整个well 放在col-lg-3 中？
你在哪里添加“col-lg-3”类？您也许应该提供更多的 html，以便人们可以看到您将 div 放在哪里，以便他们可以帮助您。

标签： css twitter-bootstrap-3

【解决方案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>

【讨论】：