Bootstrap input-groups within navbar - html

Question

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?

Answer 1

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;
}
}