Bootstrap search box issues -

Bootstrap search box issues -

i have next piece of code in .net app uses bootstrap (3.2.0) , working quite well, though when gradually scaling browser downwards step step, search box pops onto sec row, when i'd rather scaled downwards until mobile view kicks in.

has had experience of this? come nice solutions overcome it?

<nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <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="#">connect</a> --> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li id="ctl00_ctl09_homeli"> <a href="/mrmconnectlatestapp/memberhomepage.aspx"> <!-- <img id="ctl00_ctl09__imghomelink" title="home" src="app_themes/default/images/homeicon.png" alt="home" style="height:28px;border-width:0px;vertical-align:middle" /> --> <span id="ctl00_ctl09_literal1">home</span> </a> </li> <li id="ctl00_ctl09_makebookingli"><a href="/mrmconnectlatestapp/mrmselectsite.aspx?disablesiteselection=1"> create booking</a></li> <li id="ctl00_ctl09_managebookingsli"><a href="/mrmconnectlatestapp/mrmviewmybookings.aspx?showoption=1"> manage bookings</a></li> <li id="ctl00_ctl09_managesubscriptionsli"><a href="/mrmconnectlatestapp/membersubscriptions.aspx"> memberships</a></li> <li id="ctl00_ctl09_unpaidsaleli"><a href="/mrmconnectlatestapp/managesales.aspx"> unpaid sales</a></li> </ul> <ul class="nav navbar-nav navbar-right hidden-md hidden-sm hidden-lg"> <li><a href="membermanagement/editmemberdetails.aspx">my details</a></li> <li><a href="help.aspx">help</a></li> </ul> <div class="navbar-form navbar-right" role="search"> <div class="input-group"> <!-- <input type="text" class="form-control" placeholder="search" name="srch-term" id="srch-term"> --> <input name="ctl00$ctl09$searchtextbox" type="text" id="ctl00_ctl09_searchtextbox" class="searchbox form-control"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> <button class="btn btn-success" type="button">advanced</button> </div> </div> </div> </div>

http://www.bootply.com/sqwnkcdkjx

add next class searchbox container:

<div class="input-group col-md-12">

bootstrap automatically size input width of it's container. utilize 'col-md(sm, lg)-*(1-12)' allow more controlled resizing.

twitter-bootstrap