Html 引导导航下拉方向

我正在使用Twitter引导构建一个布局。我在导航栏中定位下拉菜单时遇到问题。如果.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>

您只需覆盖引导的

。下拉菜单。向右拉

样式：

.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;
}

使用要覆盖的任何右拉菜单中的类

下拉列表right

---

我不确定我是否理解所有这些规则的用途？在我的例子中，我只是简单地添加了

.dropdown-menu.dropdown-right{left:inherit；right:0px；}

，无论有没有

向右拉

，它似乎都可以正常工作。