导航栏中的两行横跨两行的列

我已经尝试了所有示例代码，但出于某种原因，我无法执行以下操作：

+-------------------------------------------------------------------------------+ | | Login [ search ] | | SITE LOGO |---------------------------------------------------------------+ | | Page 1 | Page 2 | Page 3 | Page 4 | +-------------------------------------------------------------------------------+ 

我觉得没有办法做这个工作。 我试图这个徒劳吗？

Answer 1

这是可能的，但我认为你真的在推动TBS的限制/目的。 使用自己的标记可以大大简化在TBS中完成这项工作所需的DIV汤。

更新：请参阅下面的复制使用Twitter Bootstrap 3的解决scheme。最初的问题和答案是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的导航栏的标记和脚手架一样略有变化。 这是我原来的解决scheme的两个重复，一个完全匹配原来的和一个变化。

完全复制http://jsfiddle.net/technotarek/t67Ms/

全宽度导航栏复制http://jsfiddle.net/technotarek/HxvLS/

（提示，您可以调整第二个复制，使所有内部元素跨越整个导航栏，方法是移除紧跟在nav标签之后的div.container元素。）