How to prevent bootstrap 3 (3.3.1) navbar-form from loading into a separate line on the mobile interface

Question

I use a fixed navbar that works fine on desktop browsers, but when navigation minimizes the search, it goes in two lines ( http://www.employees.org/~vivek/how_it_looks.png ), How can I make sure the search form . stays on top even after the menu crashes - something similar to yelp's mobile interface ( http://www.employees.org/~vivek/yelp_look.png )

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
      <form class="navbar-form navbar-header">
        <input type="text" class="form-control" placeholder="... ">
      </form>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a>
            </li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>

Run codeHide result

Answer 1

.navbar-form, CSS Bootstrap, . .navbar-header , . navbar-form navbar-header navbar-left navbar-search, .

CSS, . CSS, , .

400px - - , .

DEMO: https://jsbin.com/sudide/1/

HTML:

  <form class="navbar-left navbar-search">
    <input type="text" class="form-control" placeholder="... ">
  </form>

CSS

@media (min-width:0px) and (max-width:767px) { 
    .navbar {
        display: table;
        width: 100%;
    }
    .navbar-brand,
    .navbar-search,
    .navbar-toggle { display: table-cell }
    .navbar-search {
        padding: 7.5px 10px 0 0;
        width: 1%;
    }
}
@media (max-width:400px) { 
    .navbar-search {
        padding: 7.5px 15px;
        float: left;
        clear: both;
        width: 100%;
    }
}
@media (min-width:768px) { 
    .navbar-search {
        float: left;
        margin: 7.5px 0;
    }
}