Bootstrap nav-向右堆叠的下拉列表

Question

我正在开发一个带有twitter-bootstrap的界面，它有一个用于导航的侧边栏，因此使用了nav-stacked。我还想使用一些选项卡中的下拉菜单。我发现下拉菜单落在所有其他菜单项之上是不优雅的。我希望下拉菜单下拉到侧边栏的一侧，这样你仍然可以看到其余的侧边栏项目。我查了一下pull-right，但我不认为这是我要找的。

无论如何，这是我到目前为止所知道的：

            <ul class="nav nav-tabs nav-stacked"> 
                <li class="{{home}}">
                    <a href="/home/">Home</a></li>

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="/cars/">Cars<b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li class="{{1999s10}}"><a href="/cars/1999s10">1999 Electric S-10</a></li>
                        <li class="{{1965malibu}}"><a href="/cars/1965malibu">1965 Malibu</a></li>
                        <li class="{{1960hearse}}"><a href="/cars/1960hearse">1960 Hearse</a></li>
                        <li class="{{1966gto}}"><a href="/cars/1966gto">1966 GTO</a></li>
                        <li class="{{1971blazer}}"><a href="/cars/1971blazer">1971 Bazer</a></li>
                        <!-- <li class="divider"></li> -->
                    </ul>

                </li>
            </ul>

Answer 1

所以你想要一个不像下拉菜单的下拉菜单:)这很容易实现，这是一个“新鲜的”twitter引导程序上的工作示例

<ul class="nav nav-tabs nav-stacked" style="width:200px;">  <!-- <<<< added styling -->
    <li class="{{home}}"><a href="/home/">Home</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="/cars/">Cars<b class="caret"></b></a>
        <ul class="dropdown-menu" style="margin-left:200px;margin-top:-38px;">  <!-- <<<< added styling -->
            <li class="{{1999s10}}"><a href="/cars/1999s10">1999 Electric S-10</a></li>
            <li class="{{1965malibu}}"><a href="/cars/1965malibu">1965 Malibu</a></li>
            <li class="{{1960hearse}}"><a href="/cars/1960hearse">1960 Hearse</a></li>
            <li class="{{1966gto}}"><a href="/cars/1966gto">1966 GTO</a></li>
            <li class="{{1971blazer}}"><a href="/cars/1971blazer">1971 Bazer</a></li>
        </ul>
    </li>
    <!-- dummy extra links -->
    <li class="{{home}}"><a href="/home/">Home</a></li>
    <li class="{{home}}"><a href="/home/">Home</a></li>
    <li class="{{home}}"><a href="/home/">Home</a></li>
    <li class="{{home}}"><a href="/home/">Home</a></li>
    <li class="{{home}}"><a href="/home/">Home</a></li>
    <li class="{{home}}"><a href="/home/">Home</a></li>
</ul>

只需设置dropdown-menu样式，使其垂直放置在nav-tabs和dropdown-toggle元素之外。我不知道您使用的宽度是多少，所以我将nav-tabs设置为200px。