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

したがって、ドロップダウンメニューのように機能しないドロップダウンメニューが必要です:)これはかなり簡単に実行できます。ここでは、「新しい」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に配置されるようにスタイルを設定するだけです。使用している幅がわからないので、200pxに設定しました。nav-tabsdropdown-togglenav-tabs

于 2012-10-24T20:22:11.763 に答える