Bootstrap Navbar Keep Elements on Same Line When Collapsed
<p>I am using a Bootstrap navbar and using it's collapse functionality.</p>

<p>In my fully expanded navbar, I have three elements - a search field and it's button, and also a browse button.</p>

<p>When it collapses, I would like to have the search field and it's submit button to appear on the same line. However, when my navbar collapses, it places the search field on it's own line, and then the "submit" and "browse" button on the same line. The image below shows what I mean.</p>

<p><a href="https://i.stack.imgur.com/OyQW5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OyQW5.jpg" alt=""></a></p>

<p>I would like it to have the search field and the glyphicon 'submit' button on one line, and the browse button on the line below.</p>

<p>Here is the html I am using: </p>

<pre><code>&lt;div class="collapse navbar-collapse" id="example-navbar-collapse"&gt;
    &lt;form class="navbar-form navbar-left"&gt;
        &lt;div class="form-group"&gt;
            &lt;input type="text" class="form-control"&gt;
        &lt;/div&gt;&lt;!-- 
         --&gt;&lt;button type="submit" class="btn btn-default btn-search""&gt;
            &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;button type="submit" class="btn btn-default"&gt;Browse&lt;/button&gt;
    &lt;/form&gt;
&lt;/div&gt;
</code></pre>