输入组到达导航窗格

我正在努力解决各种问题 Bootstrap input-group, 放在里面 navbar. 格式化
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 class="form-control" ng-model="first.value" readonly="" type="text"/>
</div>
</div>
<div class="form-group">
<div class="btn-group itg-action">
<button class="btn btn-default itg-action-btn" ng-bind="text" ng-click="swap//"></button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<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 class="form-control" ng-model="second.value" readonly="" type="text"/>
<span class="input-group-addon" ng-bind="second.name"></span>
</div>
</div>
<div class="form-group itg-fee">
<div class="input-group">
<input class="form-control" ng-model="fee" readonly="" type="text"/>
<span class="input-group-addon">fee</span>
</div>
</div>
</form>
</nav>
</div>


和款式:


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


有两个问题:

移动视图 /较少的 768 像素/ - 此完整的垃圾线重叠导航面板的边界,控件粘贴到边界。

中等大小的版本更好,但由于某种原因,第三个入口通往第三行。

似乎输入组与导航面板不兼容。 我是对的?
已邀请:

奔跑吧少年

赞同来自:

它们与导航面板完美地工作,最低金额 css, 但是您无法根据您的定制定制,因为大小很重要。 入口群是宽度 display:table 和 100%, 他们需要 col-. 如果您有太多的链接或具有非常长的名称链接,则导航面板会打破。

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

要回复问题请先登录注册