Bootstrap: Как да създадете допълнителни елементи от менюто в navbar-collapse

Опитвам се да създам персонализирана навигационна лента в Bootstrap.

Бих искал да внедря четири неща:

  1. Дясно подравняване на навигационните връзки

  2. Централно подравняване на текста на навигационните връзки, когато навигационната лента е разширена

  3. Подравняване на текста отдясно на навигационните връзки, когато навигационната лента се сви

  4. (това е трудната част) Допълнителни навигационни връзки, които се показват, когато навигационната лента е свита, но не се показват, когато се разгъне.

<div class="navbar">
    <div class="navbar-inner">
        <div class="ps-content">
            <button type="button" class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="brand">Navigation</div>
            <!-- PS RHS menu items -->
            <div class="visible-tablet pull-right">
                <ul class="nav">
                    <li class="active"><a href="/bg#link_1">Active link</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="/bg#link_2">Second link</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="/bg#link_3">Third link</a></li>
                </ul>
            </div>
            <div class="nav-collapse pull-right ">
                <ul class="nav pull-right ">
                    <li class="active"><a href="/bg#link_1">Actives link</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="/bg#link_2">Second link</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="/bg#link_3">Third link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

jsFiddle тук: http://jsfiddle.net/robmc/M43fK/4/

Успешно постигнах 1 и 2 и съм сигурен, че има малко просто CSS маркиране, което ми липсва за 3, но точка 4 е това, което ме спъва. Не съм виждал това да се опитва никъде другаде. Някакви идеи?

Благодаря


css twitter-bootstrap navbar
person alias51    schedule 29.05.2013    source източник

Отговори (1)


arrow_upward
5
arrow_downward

За въпрос 3 можете да използвате <li class="text-right">.

А за въпрос 4 (връзка, която се показва само когато навигационната лента е свита) има няколко различни подхода. Един от начините е да използвате класовете скрит работен плот скрит таблет (тъй като вече използвате visible-*)

<ul class="nav hidden-desktop hidden-tablet">
  <li><a href="/bg#link_1">Collapsed link</a></li>
</ul>

Демо на Bootply

Редактиране - Bootstrap 3 актуализира трите имена на класове в зависимост от размера, който искате да скриете: .hidden-sm, .hidden-md, .hidden-lg

Редактиране(2) - Bootstrap 4 .hidden-* класовете са променени на показванекласове

person Zim    schedule 29.05.2013
comment
Благодаря, това помогна. Всъщност имах предвид как да поставя различна връзка в падащото меню спрямо навигационната лента, но вашият подход е перфектен. За интересуващите се решението беше просто: jsFiddle тук: jsfiddle.net/robmc/M43fK/4 - person alias51; 29.05.2013