14

Twitter のブートストラップ ドロップダウン ボタンが正常に機能するようになりましたが、小さな問題があります。ここの黒いナビゲーションバー:

http://twitter.github.com/bootstrap/javascript.html#dropdowns

ドロップダウンが開くと、きちんとした小さな矢印がありますね。ええと、私はすぐ下の丸薬を使用していますが、その矢印はありません。ナビゲーションバーを使用する場合にのみ矢印が含まれているようですが、これは必要ありません。

丸薬に矢を追加する方法を考え出した人はいますか? :(

4

4 に答える 4

34

メニュー項目がクリックされたときに上向きの白い矢印を参照していると仮定すると、探しているスタイルは、bootstrap.css の 3907 行にあります。

.navbar .dropdown-menu::after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  border-left: 6px solid transparent;
  content: '';
}

このスタイルをコピーして.navbar、スタイル宣言の一部を削除し、コードに合わせて変更してみてください。

于 2012-07-24T14:56:34.917 に答える
15

Jason Towne の回答を改良したものを次に示します。

メニューが右に引っ張られている場合、これは正しく機能します。

.dropdown-menu-arrow::before {
    border-bottom: 7px solid rgba(0, 0, 0, 0.2);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
    display: inline-block;
    left: 9px;
    position: absolute;
    top: -7px;
}

.dropdown-menu-arrow::after {
    border-bottom: 6px solid #FFFFFF;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    left: 10px;
    position: absolute;
    top: -6px;
}

.btn-group.pull-right > .dropdown-menu-arrow::before {
    left: inherit;
    right: 9px;
}

.btn-group.pull-right > .dropdown-menu-arrow::after {
    left: inherit;
    right: 10px;
}

使用例を示します。

<div class="btn-group pull-right">
    <a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
    Actions
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu dropdown-menu-arrow">
        <li>...</li>
    </ul>
</div>
于 2013-03-21T11:56:34.107 に答える
3

丸薬が何であるかはわかりませんが、ブートストラップがある場合は、これをコードの任意の場所に配置するだけで矢印を追加できます。

<b class="caret"></b>

そうですか？

于 2012-07-24T14:53:25.787 に答える
0

これは私の仕事です

    //css
        .arrow-right > .dropdown-menu:after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #ffffff;
        position: absolute;
        top: -6px;
        right: 10px;
        }

        .arrow-left > .dropdown-menu:after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #ffffff;
        position: absolute;
        top: -6px;
        left: 10px;
        }

    // html

//for left side dropdown menu

    <div class="dropdown arrow-left">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
    </ul>
    </div>


//for right side dropdown menu

    <div class="dropdown pull-right arrow-right">
    <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown
    <b class="caret"></b>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
    </ul>
    </div>
于 2013-07-02T16:58:23.650 に答える