Bootstrap Navbar Keep Elements on Same Line When Collapsed

Question

I am using a Bootstrap navbar and using it's collapse functionality.

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

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.

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.

Here is the html I am using:

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

Answer 1

Put you button inside the form-group,

<div class="form-group">
    <input type="text" class="form-control">
    <button type="submit" class="btn btn-default btn-search">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</div>

add this to your CSS,

.navbar-form .form-group input {
  width: calc(100% - 50px);
  display: inline-block;
  vertical-align: top;
}

and here is a fiddle demo