Bootstrap input-groups within navbar
css, html, twitter-bootstrap
Solution
They work fine with the navbar with a minimal amount of fiddling with the css, but you can't have it set up like you have it because the size matters. Input groups are display:table and 100% width, they need a col-. If you had too many links or links with really long names, your navbar would break down crappily.
DEMO http://jsbin.com/putuki/1/edit
<div class="navbar navbar-default navbar-static-top my-navbar">
<button class="navbar-toggle visible-xs" data-target=".navbar-collapse" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"><!--empty--></span> <span class="icon-bar"><!--empty--></span> <span class="icon-bar"><!--empty--></span></button>
<div class="container visible-xs">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse" id="mynavcollapse">
<div class="container">
<div class="row">
<form>
<div class="col-sm-2 hidden-xs">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="col-sm-2">
<div class="input-group">
<input class='form-control' placeholder="Search: (stuff)" type='text'> <span class="input-group-btn"><button class="btn btn-default">Button</button></span>
</div><!-- /input-group -->
</div><!-- /col- -->
<div class="col-sm-2">
<div class="input-group">
<input class='form-control' placeholder="Search: (stuff)" type='text'> <span class="input-group-btn"><button class="btn btn-default">Button</button></span>
</div><!-- /input-group -->
</div><!-- /col- -->
<div class="col-sm-3">
<div class="input-group">
<input class='form-control' placeholder="Search: (stuff)" type='text'> <span class="input-group-btn"><button class="btn btn-default">Button</button></span>
</div><!-- /input-group -->
</div><!-- /col- -->
<div class="col-sm-3">
<div class="input-group">
<input class='form-control' placeholder="Search: (stuff)" type='text'> <span class="input-group-btn"><button class="btn btn-default">Button</button></span>
</div><!-- /input-group -->
</div><!-- /col- -->
</form>
</div>
</div>
</div>
</div>
CSS
.my-navbar .row [class*="col-"] {
margin-top: 10px
}
#mynavcollapse {
clear: both;
padding: 0 0 10px;
background: #eee;
}
@media (min-width: 768px) {
.my-navbar .navbar-brand {
float: none;
display: inline-block;
padding: 7px 0 0 0;
}
.my-navbar .row {
margin-left: -.5%;
margin-right: -.5%;
}
.my-navbar .row [class*="col-"] {
min-height: 1px;
padding-left: .5%;
padding-right: .5%;
padding-top: 10px;
margin-top: 0;
}
}
Problem
I'm trying to solve the various issues with Bootstrap input-group placed inside navbar. The formatting http://bootply.com/101777 ``` <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <span class="navbar-brand">Game</span> </div> <form class="navbar-form navbar-left itg-game"> <div class="form-group itg-first"> <div class="input-group"> <span class="input-group-addon" ng-bind="first.name"></span> <input type="text" class="form-control" readonly ng-model="first.value"> </div> </div> <div class="form-group"> <div class="btn-group itg-action"> <button ng-click="swap()" class="btn btn-default itg-action-btn" ng-bind="text"></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href ng-click="resetGame()">Reset game</a></li> </ul> </div> </div> <div class="form-group itg-second"> <div class="input-group"> <input type="text" class="form-control" readonly ng-model="second.value"> <span class="input-group-addon" ng-bind="second.name"></span> </div> </div> <div class="form-group itg-fee"> <div class="input-group"> <input type="text" class="form-control" readonly ng-model="fee"> <span class="input-group-addon">fee</span> </div> </div> </form> </nav> </div> ``` And the styles: ``` @media (min-width: 768px) { .itg-game { } .itg-game .itg-first, .itg-game .itg-second { width: 12em; } .itg-game .itg-fee { width: 8em; } .itg-game .itg-action { text-align: center; } .itg-game .itg-action .itg-action-btn { width: 15em; } } ``` There are two issues: - The mobile view (less than 768px) is completely rubbish - lines overlaps the borders of the navbar, controls stick to the borders. - mid-size version is better but for some reason the third input jumps to the third line. It looks like the input-groups are not compatible with navbars. Am I right?