css - Bootstrap 3 和 col-md rows 中 <input> 不可点击

Question

我在表单上有一些“col-md-12”div，它们似乎“覆盖”了前面的输入，使得它们不可点击。

我使用 Bootstrap 3.0.0 创建了一个 bootply 来说明该问题。 unclickable inputs

如果我使用 bootstrap 3.0.3 制作相同的 bootply，那么输入字段现在可以访问 clickable inputs

我想知道这是否是一个已修复的 Bootstrap 错误，或者我的布局是否违反了某些规则？

Answer 1

你需要将你的列放入带有行类的div中

<form>
      <div class="row">           // HERE
          <div class="col-md-6">
            <label class="control-label col-md-4">Home Phone:</label>
            <div class="col-md-8">
              <input id="contact_detail_home_phone" name="contact_detail[home_phone]" size="30" type="text" value="123 5668" class="form-control">
            </div>
          </div>
          <div class="col-md-6">
            <label class="control-label col-md-4">Work Phone:</label>
            <div class="col-md-8">
              <input id="contact_detail_work_phone" name="contact_detail[work_phone]" size="30" type="text" value="582 5135" class="form-control">
            </div>
          </div>
      </div>
      <div class="row">           // AND HERE
            <div class="col-md-12">
                <label class="control-label">Notes:</label>
                <textarea cols="40" id="contact_detail_notes" name="contact_detail[notes]" rows="4" class="form-control"></textarea>
            </div>
      </div>   
    </form>