html - Bootstrap - input in navbar spanning several columns -


in bootstrap 3.3.4, try have input group in navbar spans 8 central columns, next brand name. unfortunately input group either seems remain fixed size, or stretches input-group-addon. code closest want achieve (modulo stretching) this:

<nav class="navbar navbar-default" role="navigation">   <div class="container-fluid">     <div class="row">     <div class="col-xs-2">       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">         <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>     </div>      <div class="col-xs-8">       <form class="navbar-form">         <div class="form-group" style="width: 100%">           <div class="input-group" style="width: 100%">             <input type="text" class="form-control"  style="width: 100%">             <span class="input-group-addon">               <span class="glyphicon glyphicon-search"></span>             </span>           </div>         </div>       </form>     </div>   </div> 

if give form class of form allow form group stretch 100% want.

 <nav class="navbar navbar-default" role="navigation">   <div class="container-fluid">     <div class="row">     <div class="col-xs-2">       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">         <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>     </div>      <div class="col-xs-8">       <form class="form">         <div class="form-group">           <div class="input-group" style="">             <input type="text" class="form-control">             <span class="input-group-addon">               <span class="glyphicon glyphicon-search"></span>             </span>           </div>         </div>       </form>     </div>   </div>  </nav> 

http://codepen.io/anon/pen/qbwmax


Comments

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -