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

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

Twitter Bootstrap输入组问题

2 个答案: