我有一个带有3个文本链接的简单导航栏,一个搜索栏和一个包含更多链接的下拉列表,如jsfiddle中所示
http://jsfiddle.net/guyisra/DByTm/1/
full window fiddle(调整窗口直到2行)
<div class="navbar navbar-fixed-top ">
<div class="navbar-inner " style="padding:3px;">
<div class="container navbar_container" style=" margin-left: 50px; "> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/" style=" padding: 0; width: 185px; ">
LOGO
<div class="sprite-logos "></div>
</a>
<div class="nav-collapse collapse ">
<ul class="nav">
<li id="loading-indicator" style="margin-top: 8px; visibility: hidden;">
<div></div>
</li>
<li class="divider-vertical"></li>
<li class="nav_option"><a href="/Link1"><i class="icon-envelope"> </i> Link num 1 </a>
</li>
<li class="nav_option"><a href="/Link2"><i class="icon-envelope"> </i> Link num 2</a>
</li>
<li><a href="/Link3"><i class="icon-envelope"> </i> Link num 3</a>
</li>
<li class="divider-vertical"></li>
<form accept-charset="UTF-8" action="/home" class="navbar-search pull-left" method="get">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
</div> <span class="icon-search" style="position:relative;vertical-align: middle;left:27px;"></span>
<input class="input-medium search-query" id="q" name="q" placeholder="Search" required="required" style="padding-left:29px" type="text">
</form>
</ul>
<ul class="nav pull-right">
<li>
<div> <a href="/red" class="btn btn-danger">RED</a>
</div>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
Jimmy bob
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="/Link"><i class="icon-envelope"> </i> Link</a>
</li>
<li><a href="/Link"><i class="icon-envelope"> </i> Link</a>
</li>
<li><a href="/Link"><i class="icon-envelope"> </i> Link</a>
</li>
<li class="divider"></li>
<li> <a href="/Link"><i class="icon-envelope"> </i> Link</a>
</li>
<li class="divider"></li>
<li> <a href="Link" data-method="delete" rel="nofollow"><i class="icon-envelope"> </i> Link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div> <span class="sprite_loader"></span>
</div>
调整大小时,其中一个尺寸会导致nabvar移位并产生2行,如下图所示
我无法缩短Link1,2,3名称,用户名可能更长。
我希望导航栏始终为1行,如果用户名(或右拉部分)太长,无法将搜索表单推得更短
有办法做到这一点吗?
答案 0 :(得分:4)
在row
中使用container
是使用Twitter Bootstrap时的最佳做法
<div class="container">
<div class="row">
// your content
</div>
</div>
答案 1 :(得分:0)
在您的案例/示例中,将span2类添加到搜索输入字段:请参阅http://jsfiddle.net/bassjobsen/s9Mcp/1/
<input class="span2 input-medium search-query" id="q" name="q" placeholder="Search" required="required" style="padding-left:29px" type="text">
答案 2 :(得分:0)
对我来说,问题似乎是我在导航栏中有太多东西。许多按钮,搜索表单,徽标等使其大于~940px,因此在达到触发宽度(940px)之前折叠为两行以进行折叠。不确定是否有办法容纳这个,但我决定删除一些按钮,缩短一些文本等,这让我超越它。