html - Bootstrap 导航下拉方向

Question

我正在使用 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>

Answer 1

您只需要覆盖 Bootstrap 的 .dropdown-menu.pull-right 样式:

.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类。

jsFiddle