트위터 부트 스트랩의 입력 그룹 내에서 버튼 및 드롭 다운 순서가 바뀌면 형식이 잘못된 결과가 나타납니다.

Question

내 앱에서 검색을 "상당히"시도하고 있습니다. 이것은 하나의 텍스트 상자와 "유형"(Outlook 유형 응용 프로그램의 "보낸 편지함", "지운 편지함", "받은 편지함"과 유사) 및 검색을 실행하기위한 "이동"버튼을 선택하기위한 드롭 다운으로 구성됩니다.

나는 아래 피들을 준비했습니다. 드롭 다운 및 이동 버튼의 순서를 바꾸면 컨트롤 사이에 공백을 추가 한 것 같습니다 (이는 내가 원하는 것은 아닙니다). 이게 내가 HTML에서 잘못하고있는 것입니까, 아니면 이것을 부트 스트랩 사람들에게 문제로 기록해야합니까?

http://jsfiddle.net/ebV3v/

<form class="clearfix" role="form" style="padding:5px; border:solid 1px red;"> 
    <div class="input-group"> 
     <input id="searchText" type="text" placeholder="" class="form-control" /> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:120px;"> 
       <span>[ -- Select -- ]</span> 
       <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu pull-right"> 
       <li><button>X</button></li> 
       <li><button>Y</button></li> 
       <li><button>Z</button></li> 
      </ul> 
      <button type="submit" class="btn btn-default">Search</button> 
     </div> 
    </div> 
</form> 

<form class="clearfix" role="form" style="margin-top:5px; padding:5px; border:solid 1px green;"> 
    <div class="input-group"> 
     <input id="searchText" type="text" placeholder="" class="form-control" /> 
     <div class="input-group-btn"> 
      <button type="submit" class="btn btn-default">Search</button> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:120px;"> 
       <span>[ -- Select -- ]</span> 
       <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu pull-right"> 
       <li><button>X</button></li> 
       <li><button>Y</button></li> 
       <li><button>Z</button></li> 
      </ul> 
     </div> 
    </div> 
</form> 

Answer 1

놓습니다 <ul> 검색 버튼 후 요소와 공간이 사라지고,하고 드롭 다운 목록은 영향을받지 않습니다.

나는이 공간을 차지하지 않고 <ul> 요소를 남겨 두는 방법을 더 찾고 조사 할 것이다. 그러나 제 제안은 아무런 영향을주지 않고 문제를 해결해야합니다.

편집 그것은 정확히 <ul> 문제가 아니에요

. 정확한 버그는 Bootstrap에서 제공되는 inline-block 디스플레이의 버튼으로 인해 발생합니다. 그들은 inline-block이므로 </button>과 <ul> 사이의 공백은 텍스트 공백으로 간주됩니다. 그들 사이의 모든 공백을 제거해야하며 고정되어 있습니다 (소스 코드에서 줄 바꿈을 제거해야했습니다).

Updated Fiddle