Twitter Bootstrap：只能在Firefox中爲輸入組工作的拉右類文件

Question

這種HTML與Bootstrap樣式在Firefox中顯示的方式與Chrome和Safari中的不同。在Firefox中，正如我所期望的「向右拉」類，元素向右移動，佔用最小空間。在Chrome和Safari中，沒有浮動。元素跨越屏幕的整個寬度。如果我刪除了input-group-btn元素，問題就被神祕地修復了，但是，這破壞了我想要的樣式。

<div class="pull-right"> 
    <div class="input-group"> 
     <input class="form-control ng-pristine ng-valid" placeholder="Search" name="new_tag" ng-model="search.$" onkeypress="return disableEnterKey(event)" type="text"> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button"> 
       <i class="fa fa-search"></i> 
      </button> 
     </span> 
    </div> 
</div> 

這裏有一個的jsfiddle（在Firefox比較它的Safari或Chrome）http://jsfiddle.net/chvg8v9z/1/

Answer 1

這裏是一個工作示例： http://jsfiddle.net/chvg8v9z/6/

<div class="col-lg-4 col-md-4 col-xs-4" style="float: right;"> 
    <div class="input-group"> 
     <input class="form-control ng-pristine ng-valid" placeholder="Search" name="new_tag" ng-model="search.$" onkeypress="return disableEnterKey(event)" type="text"> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button"> 
       <i class="fa fa-search"></i> 
      </button> 
     </span> 
    </div> 
</div> 

你可以調整列大小的數量。