Twitter的引導輸入組問題

Question

<form class="navbar-form nav-search form-inline" role="form"> 
    <div class="form-group"> 
     <div class="input-group"> 
     <input type="search" class="form-control input-sm input-search" id="filter-input" placeholder="Type to filter.."> 
      <span class="input-group-btn"> 
       <button class="btn btn-default btn-sm" type="button">x</button> 
      </span> 
     </div> 
     </div> 
    <button type="submit" class="btn btn-primary btn-sm btn-search">Search</button> 
</form>  

http://jsfiddle.net/XfzFQ/22/

當我使用的輸入組，它是瘋狂。我找不到解決方案。幫我！

Answer 1

這也是bootstrap的一個問題。 github.com/twbs/bootstrap/issues/9950解決方案是通過給組織style="width:200px"進行引導。 jsfiddle.net/9Z4MN/3

Answer 2

我發現最好的解決方案是在移動設備的媒體查詢中更正此問題。這給了我對臺式機的理想效果，以及在平板電腦/手機上的100％寬度：

@media screen and (min-width: 768px) { 
    .form-group { 
     width: 200px; 
    } 
}