Добавив стрелку к раскрывающимся таблеткам для бутстрапа twitter?

У меня есть кнопки вырезания бутстрапа twitter, которые успешно работают, но у меня крошечная проблема. Черный навигатор здесь:

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

У него есть аккуратная стрелка, когда открывается раскрывающийся список, не так ли? Ну, я использую таблетки прямо внизу, и у них нет этой стрелы. Кажется, стрелка включена только при использовании навигационной панели, которая мне не нужна.

Кто-нибудь понял способ добавить стрелки к таблеткам?: (

Ответ 1

Предполагая, что вы ссылаетесь на белую стрелку, указывающую вверх, когда нажимается элемент меню, стиль, который вы ищете, находится в строке 3907 в bootstrap.css:

.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 объявления стиля и изменить его в соответствии с вашим кодом.

Ответ 2

Вот уточнение ответа Джейсона Тауна.

Это работает правильно, если меню было нажато вправо.

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

Ответ 3

Не уверен, что такое таблетки, но если у вас есть бутстрап, вы добавляете стрелки, просто помещая это в свой код.

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

Это то, что вы имели в виду?

Ответ 4

Это работа для меня

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