我试过所有的示例代码,但由于某种原因,我不能做以下:
+-------------------------------------------------------------------------------+ | | Login [ search ] | | SITE logo |---------------------------------------------------------------+ | | Page 1 | Page 2 | Page 3 | Page 4 | +-------------------------------------------------------------------------------+
我觉得没有办法使这项工作。我试图这个徒劳?
解决方法
这是可能的,但我认为你真的推动TBS的限制/目的。使用自己的标记可以大大简化在TBS中进行此工作所需的DIV-soup。
更新:请参阅下面的复制的解决方案,我使用Twitter Bootstrap 3.原来的问题和答案是对Bootstrap 2。
<div class="container"> <div class="navbar"> <div class="navbar-inner"> <img src="http://placehold.it/70x70" class="span1" style="position:relative;top:10px"> <div class="span10"> <div class="row"> <div class="span2 offset5" style="text-align:right"> <div class="navbar-text"> <p><a href="#">Login</a></p> </div> </div> <div class="span2 offset1"> <div class="pull-right"> <form class="navbar-form"> <div class="input-append"> <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">Search</button> </div> </form> </div> </div> </div> <div class="row"> <div class="span10"> <ul class="nav pull-right"> <li><a href="#">Page 1</a></li> <li class="divider-vertical"></li> <li><a href="#">Page 2</a></li> <li class="divider-vertical"></li> <li><a href="#">Page 3</a></li> <li class="divider-vertical"></li> <li><a href="#">Page 4</a></li> </ul> </div> </div> </div> </div> </div> </div>
TWITTER BOOTSTRAP 3更新:
TBS3的导航栏的标记改变了轻微,他们的脚手架。这里是我的原始解决方案的两个重复,一个完全匹配的原始和一个变化。
精确复制
http://jsfiddle.net/technotarek/t67Ms/
使用全宽Navbar进行复制
http://jsfiddle.net/technotarek/HxvLS/
(提示,您可以调整第二次复制,以便所有内部元素通过删除nav标签后面紧跟的div.container元素来覆盖整个导航栏)。