twitter-bootstrap - Twitter Bootstrap 输入组问题

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

我发现最好的解决方案是在移动设备的媒体查询中纠正这个问题。这给了我在台式机上想要的效果，在平板电脑/手机上达到了 100% 的宽度：

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

Answer 2

这也是引导程序的一个问题。github.com/twbs/bootstrap/issues/9950解决方案是通过给予 form-group 来破解引导程序style="width:200px"。jsfiddle.net/9Z4MN/3