Bootstrap: prevent default mobile collapsing - css

Question

How can I prevent some of the default mobile functionality? (c.f. Bootstrap - Creating a mobile nav that doesn't use collapse)
In particular, I want to get two rows of navbar:
the first with logo and page title;
the second with something that will toggle a sidebar, with a search box filling the rest of the space.
The first time I tried I ended up ignoring the nav-bar and building my own layout, but before abandoning again I thought I would check the community. The main problem is that the search box insists on being 100% width (on small screens).
Playing around with Chrome devtools, I can turn off width:100% in .form-control but I can't seem to get .form-group to contract
<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header">
af
</div>
<div id="navbar-main">
{{page.title}}
</div>
</div>
<div class="container">
<div class="navbar-left">
<ul class="nav navbar-nav">
<li>Crieria</li>
</ul>
</div>
<div id="navbar-search" class="navbar-right">
<form class="navbar-form " role="search">
<div class="form-group">
<input type="text" size="20" class="form-control" placeholder="Search">
<!-- <button type="submit" class="btn btn-default">Submit</button> -->
</div>
</form>
</div>
</div>
</div>

Answer 1

Try this:
If you need full width in the md and lg view use container-fluid instead of container
DEMO
<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header col-xs-6 col-sm-6 col-md-6 col-lg-6">
af
</div>
<div id="navbar-main col-xs-6 col-sm-6 col-md-6 col-lg-6">
{{page.title}}
</div>
</div>
<div class="container">
<div class="navbar-left col-xs-4 col-sm-4 col-md-2 col-lg-2">
<ul class="nav navbar-nav">
<li><a href="" data-toggle>Crieria</a></li>
</ul>
</div>
<div id="navbar-search" class="navbar-right col-xs-8 col-sm-8 col-md-10 col-lg-10">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
<!-- <button type="submit" class="btn btn-default">Submit</button> -->
</div>
</div>
</div>
</div>

Answer 2

Where ever you do not want Bootstrap behavior, just don't use bootstrap classes, rather define your own classes with the styling and behavior you do want it to have.
If you attempt to overwrite Bootstrap behavior for any page element of substantial size and complexity; you'll find it would have been far easier if you'd just avoided using the bootstrap classes on that element by the time you overwrite all of it's behavior.
If all you want is a navbar with two rows though you could do it with boostrap default classes if you wanted to.. jsFiddle (link)
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<img src="http://placehold.it/70x70" class="span1" style="position:relative;top:10px">
<div class="span10">
<div class="row">
<div class="span2 offset5" style="text-align:right">
<div class="navbar-text">
<p>Login</p>
</div>
</div>
<div class="span2 offset1">
<div class="pull-right">
<form class="navbar-form">
<div class="input-append">
<input class="span2" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="span10">
<ul class="nav pull-right">
<li>Page 1</li>
<li class="divider-vertical"></li>
<li>Page 2</li>
<li class="divider-vertical"></li>
<li>Page 3</li>
<li class="divider-vertical"></li>
<li>Page 4<li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>