Question

我正在使用twitter-bootstrap的界面，该界面有一个用于导航的侧边栏，因此是导航堆叠的。我还想使用一些标签中的下拉菜单。我发现下拉菜单在所有其他菜单项之上下降是不优雅的。我希望下拉菜单下拉到侧栏的侧面，这样你仍然可以看到其余的侧边栏项目。我调查了右拉，但我认为这不是我想要的。

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

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

Bootstrap导航堆叠下拉到右侧

1 个答案: