부트 스트랩 버튼을 클릭하지 않아도됩니다.

Question

그래서 약간의 문제가 있습니다. 내 텍스트 상자를 클릭하면 왼쪽에있는 버튼도 클릭 한 것처럼 보입니다. 기본 구문을 사용하여 부트 스트랩 3.1.1을 사용하고 있습니다. 텍스트 상자를 클릭 할 때 버튼을 클릭하지 않으면 어떻게 만들 수 있습니까?

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

그리고 문제의 코드 :

<input group>이 <label> 내부에 싸여있다 때문입니다

<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

. 레이블의 일부를 클릭하면 버튼이 활성 상태가됩니다. 레이블 안에 체크 상자를 래핑하는 것과 같습니다.

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