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

Answer 2

try this one

.form-control{display:inline-block;width:80%}.btn-search{width:10%}

<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"><button type="submit" class="btn btn-default btn-search"">
            <span class="glyphicon glyphicon-search"></span>
        </button></div>
        <button type="submit" class="btn btn-default">Browse</button>
    </form>
</div>

Answer 3

At mobile screens you can position your search button to absolute and then place it over the search input to the right and then give the input a padding to the right and it will appear to be on the same line. So first position your .navbar-form to relative and then at mobile widths positon your search button to absolute and then give the the search input a padding right to make up for the button being placed over the top of it like so:

Here is a fiddle Fiddle

.navbar-form{
  position: relative;
}
@media screen and (max-width: 767px){
  .navbar-form .btn-search{
    position: absolute;
    right: 15px;
    top: 10px;
  }
  .navbar-form input{
    padding-right: 40px;
  }
}