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

Bootstrap导航下拉方向

1 个答案: