10

この写真を見てください：

例

ドロップダウン メニューの項目を左から右 (水平方向) にスタックしたい。公式ドキュメントに記載されている「list-inline」クラスを使用してみましたが、これは事態を悪化させるだけです。

HTMLは次のとおりです。

<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">List Item</a>
            <ul class="dropdown-menu">
                <li><a href="#" id="">1</a></li>
                <li><a href="#" id="">2</a></li>
                <li><a href="#" id="">1</a></li>
                <li><a href="#" id="">2</a></li>
                <li><a href="#" id="">3</a></li>
                <li><a href="#" id="">4</a></li>
                <li><a href="#" id="">5</a></li>
                <li><a href="#" id="">6</a></li>
            </ul>
        </li>
    </ul>
</nav>

ブートストラップ 3 を使用しています

4

5 に答える 5

15

liこれらをulリストとクラスに次のlist-inlineように囲みます

<ul class="dropdown-menu">
                <ul class='list-inline'>
                    <li><a href="#" id="">1</a>
                    </li>
                    <li><a href="#" id="">2</a>
                    </li>
                    <li><a href="#" id="">3</a>
                    </li>
                    <li><a href="#" id="">4</a>
                    </li>
                    <li><a href="#" id="">5</a>
                    </li>
                </ul>
</ul>

このスクリーンショットを確認してください

ここに画像の説明を入力

ここにJSFiddleがあります

アップデート1:

コメントで述べたようにclass: dropdown-menu、min-width as 160px. したがって、幅に固定されます。オーバーライドしてみてください。

ここに画像の説明を入力

アップデート2:

コメントで述べたように、ブートストラップには次のようにオーバーライドできるデフォルトのスタイルがあります

.dropdown-menu{
min-width: 200px;
}

他の要素に影響を与えると思われる場合は、idセレクターを使用してオーバーライドしてください。

#Numberlist.dropdown-menu{
min-width: 200px;
}

このJSFiddleの違いを見つけます

于 2013-09-04T14:29:41.340 に答える
3

全幅 - 100% のメニュー幅オプションが可能である必要があります

.navbar-nav {position: relative; }

li.dropdown {position: static;}

.dropdown-menu {width: 100%;}

.dropdown-menu > li {display: inline-block;}

またはそのあたり...基本的な考え方は、ドロップダウンの位置をメニューではなくメニューに相対的にすることです... migliが正しく指摘しているように

「ドロップダウン メニューは、li コンテナーの幅によって制限されています。」

于 2014-12-09T06:33:38.433 に答える