twitter-bootstrap 导航栏中的两行，其中一列跨越两行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13372092/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two rows in a navbar with a column spanning two rows
提问by ATL_DEV
I've tried all the example code out there, but for some reason I can't do the following:
我已经尝试了所有示例代码，但由于某种原因，我无法执行以下操作：
+-------------------------------------------------------------------------------+
| | Login [ search ] |
| SITE LOGO |---------------------------------------------------------------+
| | Page 1 | Page 2 | Page 3 | Page 4 |
+-------------------------------------------------------------------------------+
I am feeling like there's no way to make this work. Am I trying to this in vain?
我觉得没有办法让这个工作。我这样做是徒劳的吗？
回答by technoTarek
It's possible, but I think you're really pushing the limits/purpose of TBS. Using your own markup could greatly simplify the DIV-soup that is required to make this work in TBS.
这是可能的，但我认为你真的在推动 TBS 的极限/目的。使用您自己的标记可以大大简化在 TBS 中进行这项工作所需的 DIV-soup。
UPDATE: See below for replications of this solution that I've made using Twitter Bootstrap 3. The original question and answer were for Bootstrap 2.
更新：有关我使用 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 UPDATES:
推特引导程序 3 更新：
The markup for TBS3's navbar changed slighty, as did their scaffolding. Here are two replications of the my original solution, one that matches the original exactly and a variation.
TBS3 导航栏的标记略有变化，他们的脚手架也是如此。这是我的原始解决方案的两个复制品，一个与原始解决方案完全匹配，另一个是变体。
Exact Replication http://jsfiddle.net/technotarek/t67Ms/
精确复制 http://jsfiddle.net/technotarek/t67Ms/
Replication with Full Width Navbar http://jsfiddle.net/technotarek/HxvLS/
使用全宽导航栏复制 http://jsfiddle.net/technotarek/HxvLS/
(Hint, you can adjust the second replication so that all of the internal elements span the entire navbar by removing the div.container element that follows immediately after the nav tag.)
（提示，您可以通过删除紧跟在 nav 标记之后的 div.container 元素来调整第二次复制，以便所有内部元素跨越整个导航栏。）
回答by Maciej Bled
You need to make two divs in the header, the left one, and the right one. Then in the right div, you need to put two another divs.
你需要在header里做两个div，左边一个，右边一个。然后在右边的div中，你需要再放两个div。
HTM Language:
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>
CSS:
CSS：
header {
display: flex;
flex-flow: row nowrap;
}
.navbar-header {
display: flex;
flex-flow: column nowrap;
}
I hope I helped :D
我希望我有所帮助：D
