8

各ドロップダウン メニューの右側にバッジを配置しようとしています。現在、バッジは次のようになっています。

バッジ、プルライトなし

関連するコード:

            <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown ">
                    <a data-target="/business" href="/business" class="dropdown-toggle" data-toggle="dropdown">Business<b class="caret"></b></a>
                    <ul class="dropdown-menu">

                        <li >
                            <a href="/economy">Economy <span class='badge' today: 2</span></a>
                        </li>
                        <li >
                            <a href="/financials">Financial Reports <span class='badge' today: 78</span></a>
                        </li>
                        <li >
                            <a href="/interest">Interest Rates </a>
                        </li>

                    </ul>
                </li>
            </ul>
         </div>

バッジ クラス () に 'pull-right' を追加すると、バッジが折りたたまれます。

右引きのバッジ

また、bootswatch cosmo テンプレートを使用して、boostrap3 を使用します (関連する場合)。ここに何かアイデアはありますか？

4

4 に答える 4

3

SPAN タグの終了が欠落>しており、クラス名に ' not ' が使用されており、データ ターゲット属性に無効な先頭のスラッシュが含まれています (少なくとも、これらはテストしたときに発見したものでした)。動作させることができる唯一の方法親 UL の固定幅と右フローティング (「プルライト」) バッジ スパンの組み合わせでした。

以下は、Twitter-Bootstrap 3 の下で Firefox と Chrome で正常にテストされました。

 <li class="dropdown ">
    <a data-target="business" href="/business" class="dropdown-toggle" data-toggle="dropdown">Business<b class="caret"></b></a>
    <ul class="dropdown-menu" style="width:250px;">
        <li>
            <a href="/economy"><span class="badge pull-right">today: 2</span>Economy</a>
        </li>
        <li>
            <a href="/financials"><span class="badge pull-right">today: 78</span>Financial Reports</a>
        </li>
        <li>
            <a href="/interest">Interest Rates </a>
        </li>
    </ul>
</li>
于 2013-10-30T23:59:27.967 に答える
1

CSS3 フレックス ボックスでこれを行うことができます。

JSFiddle

HTML:

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">
                <span>Something</span>
                <span class="badge">0.5</span>
            </a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">
                <span>Something else</span>
                <span class="badge">1</span>
            </a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">
                <span>Something seriously super super long</span>
                <span class="badge">1 bajillion</span>
            </a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">
                <span>Something also quite long</span>
                <span class="badge">½ bajillion</span>
            </a>
        </li>
    </ul>
</div>

CSS:

.dropdown-menu a[role="menuitem"] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.dropdown-menu a[role="menuitem"] span:first-child {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 2em;
}

プロジェクトによっては、ブラウザの互換性を確認する必要がある場合があります。

これがどのように機能するかについての良い説明です。

于 2015-05-16T09:34:15.690 に答える
-1

試してみてください... (未テスト)

<li >
    <a href="/economy">
        <span="pull-left">
            Economy
        </span>

        <span class="pull-right">
            <span class='badge' today: 2></span>
        </span>
    </a>
</li>
于 2013-10-30T23:44:45.413 に答える