Bootstrap 3 search box width can not be 100%?

Question

I am using Bootstrap 3 and I followed their recommendation on how to put input input (text input) in the header:

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

Like this:

<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>

And this is what I get:

But I want the search query to be 100% wide, for example:

Therefore, I try to do this in several ways, but I cannot.

Failed to try # 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>

Failed to try # 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>

and etc.

The only thing that worked was fixing the absolute value of the input. Something I don't want because it interrupts the reaction with the help of small screens

** How to achieve the desired width? **

By the way: I use twitter typeahead in the most modern version.

Answer 1

- CSS - navbar:

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

A Bootply.