2

Twitter Bootstrap を使用してレイアウトを作成しています。ナビゲーションバーにドロップダウンを配置するのに問題があります。.nav にプル ライトがある場合、開くドロップダウンは常に左に開きます。

左または右に開くかどうかを手動で制御できるようにしたい。これは可能ですか？

<div class="navbar" id="navbar-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="logo pull-left" href="/index_dev.php/"></a>
            <ul class="nav pull-right">
                <li class="active"><a href="/index_dev.php/"> Shots</a></li>
                <li class="divider-vertical"></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Explore <i class="icon-caret-down"></i></a>
                    <ul class="dropdown-menu span6">
                        <li class="column-menu span2">
                            <ul>
                                <li><a href="#"><i class="icon-caret-right"></i> Dry Fly</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Popper</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Terrestrial</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Streamer</a></li>
                            </ul>
                        </li>
                        <li class="column-menu span2">
                            <ul>
                                <li><a href="#"><i class="icon-caret-right"></i> Wet Fly</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Nymph</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Emerger</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Streamer</a></li>
                            </ul>
                        </li>
                        <li class="column-menu span2">
                            <ul>
                                <li><a href="#"><i class="icon-caret-right"></i> Wet Fly</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Nymph</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Emerger</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="divider-vertical"></li>
                                <li><a href="/index_dev.php/signup">Sign up</a></li>
                <li class="divider-vertical"></li>
                <li><a href="/index_dev.php/login">Sign in</a></li>
                            </ul>
        </div>
    </div>
</div>
4

1 に答える 1

2

.dropdown-menu.pull-rightBootstrap のスタイルをオーバーライドするだけです。

.navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right.dropdown-right {
    right: auto;
    left: -19px;
}
.navbar .pull-right > li > .dropdown-menu::before, .navbar .nav > li > .dropdown-menu.pull-right.dropdown-right::before {
    right: auto;
    left: 9px;
}
.navbar .pull-right > li > .dropdown-menu::after, .navbar .nav > li > .dropdown-menu.pull-right.dropdown-right::after {
    right: auto;
    left: 10px;
}

dropdown-rightオーバーライドしたい右プル メニューでクラスを使用します。

jsフィドル

于 2013-01-23T18:56:07.853 に答える