Bootstrap v3.3.7 setting navbar's search input width
<p>I'm not a seasoned Bootstrap user and I'm facing the following problem:</p>

<pre><code>&lt;header class="header"&gt;
  &lt;nav class="primary-nav navbar navbar-default navbar-fixed-top" role="navigation"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button class="navbar-toggle" data-target="#primary-nav" data-toggle="collapse" type="button"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="index.html"&gt;Hello&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse" id="primary-nav"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li class="active"&gt;&lt;a href="index.html"&gt;Welcome&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Foo&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Bar&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;form class="search navbar-form navbar-right" role="search"&gt;
          &lt;div class="form-group"&gt;
            &lt;label class="has-clear"&gt;
              &lt;input autocapitalize="off" autocomplete="off" autocorrect="off" class="form-control" id="search-input" placeholder="Search..." type="text"&gt;
              &lt;span aria-hidden="true" class="form-control-clear glyphicon " id="clear-search"&gt;&lt;/span&gt;
            &lt;/label&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
&lt;/header&gt;
</code></pre>

<p>See the companion <a href="http://codepen.io/anon/pen/KNxpqJ" rel="nofollow noreferrer">codepen</a>.</p>

<p>With this pretty trivial navbar setup, there are two things I have difficulties correcting:</p>

<ol>
<li>I don't understand why I need custom CSS to get rid of search box's <code>margin-bottom</code>, imho <strong>stock bootstrap CSS should handle this</strong> but maybe I've made a mistake</li>
<li>I couldn't find a way to reliably make the search input fill the navbar's width without specifying an absolute width in px</li>
</ol>

<p>While I can manage 1., I can't achieve a proper behavior for the navbar's search input that should take full width and disappear when the "hamburger" menu appears.</p>

<p>Thanks in advance for your help.</p>