twitter-bootstrap – 导航栏中的两行,其中一列跨两行

发布时间：2020-12-18 00:02:21 所属栏目：安全来源：网络整理

导读：我试过所有的示例代码，但由于某种原因，我不能做以下： +-------------------------------------------------------------------------------+| | Login [ search ] || SITE LOGO |---------------------------------------------------------------+| | Pa

我试过所有的示例代码，但由于某种原因，我不能做以下：

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

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

解决方法

这是可能的，但我认为你真的推动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/

使用全宽Navbar进行复制
http://jsfiddle.net/technotarek/HxvLS/

(提示，您可以调整第二次复制，以便所有内部元素通过删除nav标签后面紧跟的div.container元素来覆盖整个导航栏)。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!