Две строки в навигационной панели со столбцом, охватывающим две строки

Я пробовал весь код примера, но по какой-то причине я не могу сделать следующее:

Я чувствую, что нет способа сделать эту работу. Я пытаюсь это напрасно?

Ответы

Ответ 1

Возможно, но я думаю, что вы действительно подталкиваете ограничения/цели TBS. Использование вашей собственной разметки может значительно упростить DIV-суп, необходимый для выполнения этой работы в TBS.

ОБНОВЛЕНИЕ: см. ниже для повторений этого решения, которое я сделал с помощью 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 ОБНОВЛЕНИЯ:

Разметка для навигационной панели TBS3 изменилась незначительно, как и их строительные леса. Вот две копии моего первоначального решения, которые соответствуют оригиналу и варианту.

Точная репликация http://jsfiddle.net/technotarek/t67Ms/

Репликация с полной шириной Navbar http://jsfiddle.net/technotarek/HxvLS/

(Подсказка, вы можете настроить вторую репликацию так, чтобы все внутренние элементы охватывали весь навигатор, удалив элемент div.container, который следует сразу после тега nav.)