1

我正在开发一个带有 twitter-bootstrap 的界面，该界面有一个用于导航的侧边栏，因此是 nav-stacked。我还想使用某些选项卡中的下拉菜单。我发现下拉菜单放在所有其他菜单项的顶部是不雅的。我希望下拉菜单下拉到侧边栏的一侧，这样您仍然可以看到其余的侧边栏项目。我研究了右拉，但我认为这不是我要找的。

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

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

1 回答 1

3

所以你想要一个不像下拉菜单的下拉菜单:)这很容易完成，这里是你在“新鲜”推特引导程序上的工作示例

<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为 200 像素。

于 2012-10-24T20:22:11.763 回答