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>
Comments
Post a Comment