Question

所以我有一个小问题;当我点击我的文本框时，似乎还点击了它左边的按钮。我使用默认语法使用Bootstrap 3.1.1。如何在单击文本框时单击该按钮？

jsfiddle：http://jsfiddle.net/52VtD/6138/

有问题的代码：

<div class = "container-fluid">
        <div class = "row">
          <div class = "col-xs-12 col-sm-12 col-md-6 col-md-offset-3">
            <label>
              <div class="input-group">
                <span class="input-group-btn">
                    <button class = "btn btn-default no-outline" id = "customSearchButton" type = "button"><i class="glyphicon glyphicon-search"></i></button>
                </span>
                <input type="text" class="form-control" id = "searchTextbox" placeholder="Search SRGs...">
              </div>
            </label>
          </div>
        </div>
      </div><!-- .container-fluid -->

Answer 1

这是因为<input group>被包裹在<label>内。当您单击标签的任何部分时，该按钮将进入其活动状态。就像在标签内包装一个复选框一样。

删除<label>，然后就可以了。

Fiddle

Answer 2

只需删除标签外的按钮，如下所示：

<div class="container-fluid">
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-4">
        <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-default no-outline" id="customSearchButton" type="button"><i class="glyphicon glyphicon-search"></i></button>
            </span>

            <input type="text" class="form-control" placeholder="Search SRGs...">
        </div>
    </div>
</div>
</div>

当它不应该被点击时，点击Bootstrap按钮

2 个答案: