Bootstrap 3搜索框宽度不能100％？

Question

我正在使用Bootstrap 3，我已按照他们的建议如何在标题中输入搜索输入（文本输入）：

http://getbootstrap.com/components/#navbar

像这样：

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="">Foo</a></li>
                <li><a href="">Bar</a></li>
                <li><a>Qux</a></li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" id="" class="form-control has-search-icon" placeholder="Bleh" style="">
                </div>
            </form>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

这就是我得到的：

但我希望搜索框的宽度为100％，如下所示：

所以我正在尝试以多种方式实现这一目标，但我不能。

尝试失败＃1：

<form class="navbar-form navbar-left" role="search">
   <div class="form-group"> 
     <input type="text" id="" class="form-control has-search-icon"
        placeholder="Bleh" style="width: 100%"> <!-- here -->
    </div>
</form>

尝试失败＃2：

<form class="navbar-form navbar-left" role="search">
   <div class="form-group" style="width:100%">  <!-- here -->
     <input type="text" id="" class="form-control has-search-icon" placeholder="Bleh" style="">
    </div>
</form>

等

唯一有效的方法是修改输入的绝对值。我不想要的东西，因为它打破了小屏幕的响应性

**如何达到理想的宽度？ **

顺便说一句：我正在使用twitter的typeahead最现代版本。

Answer 1

我能让这个工作的唯一方法是在navbar-form下调整表单控件和表单组的CSS：

.navbar-form {
    overflow: auto;
}
.navbar-form .form-control {
    display: inline-block;
    width: 100%; 
    vertical-align: middle;
}
.navbar-form .form-group {
    display: inline;
}

Bootply here证明了这一点。