Question

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

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

我觉得没有办法让这项工作成功。我是徒劳地尝试这个吗？

Answer 1

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

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

Fiddle Example

<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/

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

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

Answer 2

您需要在标题中创建两个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>

CSS：

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

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

我希望我能帮助：D

导航栏中的两行，其中一列跨越两行

2 个答案: