导航栏中的两行，其中一列跨越两行 [英] Two rows in a navbar with a column spanning two rows

查看：38
本文介绍了导航栏中的两行，其中一列跨越两行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

+--------------------------------------------------------------------------------+||登录 [搜索] ||网站标志|--------------------------------------------------------------+||第 1 页 |第 2 页 |第 3 页 |第 4 页 |+-------------------------------------------------------------------------------+

我觉得没有办法让这项工作成功.我这样做是徒劳的吗?

解决方案

这是可能的，但我认为您确实在突破 TBS 的限制/目的.使用您自己的标记可以大大简化在 TBS 中进行此工作所需的 DIV-soup.

更新:有关我使用 Twitter Bootstrap 3 制作的此解决方案的复制，请参见下文.原始问题和答案适用于 Bootstrap 2.

小提琴示例

<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="#">登录</a></p>

<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">搜索</button>

</表单>

<div class="row"><div class="span10"><ul class="nav pull-right"><li><a href="#">第 1 页</a></li><li class="divider-vertical"></li><li><a href="#">第 2 页</a></li><li class="divider-vertical"></li><li><a href="#">第 3 页</a></li><li class="divider-vertical"></li><li><a href="#">第 4 页</a></li>

推特引导程序 3 更新:

TBS3 导航栏的标记略有变化，脚手架也是如此.这是我的原始解决方案的两个副本，一个与原始解决方案完全匹配，另一个是变体.

精确复制http://jsfiddle.net/technotarek/t67Ms/

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

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

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?

解决方案

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.

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.

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 UPDATES:

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.

Exact Replication http://jsfiddle.net/technotarek/t67Ms/

Replication with Full Width Navbar 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.)

这篇关于导航栏中的两行，其中一列跨越两行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆