twitter bootstrap - Two rows in a navbar with a column spanning two rows

Question

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?

question from:https://stackoverflow.com/questions/13372092/two-rows-in-a-navbar-with-a-column-spanning-two-rows

Answer 1

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.)