Twitter bootstrap 导航栏中的两行，列跨越两行

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

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

---

我觉得没办法让这一切顺利。我这样做是徒劳的吗？

这是可能的，但我认为你真的在推动TBS的极限/目的。使用您自己的标记可以大大简化在TBS中实现此功能所需的DIV soup

更新：请参阅下面我使用Twitter Bootstrap 3制作的此解决方案的复制。最初的问题和答案是针对Bootstrap 2的

搜寻

TWITTER BOOTSTRAP 3更新：

TBS3导航栏的标记变化很小，他们的脚手架也一样。这里是我的原始解决方案的两个副本，一个完全匹配原始解决方案，另一个是变体

精确复制

使用全宽度导航栏进行复制

---

（提示，您可以调整第二次复制，通过删除nav标记后面紧跟的div.container元素，使所有内部元素跨越整个导航栏。）

您需要在标题中创建两个div，左侧和右侧。然后在右边的div中，你需要再放两个div

HTM语言：

<header>
<div class="logo">
  Put logo here
</div>
<div class="right-site">
  <div class="login">
    Put login, and search bars here
  </div>
  <div class="navbar-header">
    Put navigation things here
  </div>
</div>

---

我希望我能帮上忙：D

对于小提琴，请确保将结果窗口扩展到至少940px宽。哇！哇谢谢我不配。。。这花了很多小时的实验，我无法让它工作。我的不幸实现与您的实现之间最大的区别在于，您创建了列，然后创建了其中的两行。我倒着做。我创建了两行，然后是其中的列。一般来说，BPS和CSS的问题是，标记和CSS变得如此混乱，以至于你把它们撕碎，重新开始。再次感谢。我希望我能给你一些额外的分数。你在创建自己的组件方面做得很好，但是如果你使用标准实现，你最终会重新创建很多免费获得的功能和外观。我发现类名用于标识JS实现中的元素。如果他们将数据标签用于此目的，那就太好了。然而，你会得到一个更加语义化的标记，而不会有酸辣的、仰卧的或带刺的div。在最新的示例页面上，他们有一个完全绕过导航栏的营销网站。这太棒了，我也在利用它。非常感谢。然而，我发现了一个小bug：

最后一个

应该是结束标记，需要“/.Thx@NutterzUK”。固定的。

<header>
<div class="logo">
  Put logo here
</div>
<div class="right-site">
  <div class="login">
    Put login, and search bars here
  </div>
  <div class="navbar-header">
    Put navigation things here
  </div>
</div>

header {
  display: flex;
  flex-flow: row nowrap;
}

.navbar-header {
  display: flex;
  flex-flow: column nowrap;
}