Как удалить стрелку из выпадающего списка в Bootstrap CSS?

Я пытаюсь удалить стрелку, которая появляется в раскрывающемся меню в Twitter Bootstrap framework. Кто-нибудь придумал, как убрать стрелы?

8 ответов


From:http://twitter.github.com/bootstrap/components.html#buttonDropdowns

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Если убрать <span class="caret"></span> стрелка не отображается.

попробовал использовать dev. консоль в Chrome, и, кажется, работает.


удаление класса курсора из ссылки удаляет стрелку из панели навигации,

.dropdown-menu::before, 
.dropdown-menu::after {
    border: none;
    content: none;
}

удалит маленькую вкладку из выпадающего меню самостоятельно.


просто удалите border-bottom из раскрывающегося списка-меню удалит стрелку из панели навигации.

.navbar .nav > li > .dropdown-menu:before, .navbar .nav > li > .dropdown-menu:after{
    border-bottom: none;
}

Я нашел лучшее решение-добавить overflow:hidden; до .dropdown-menu


.dropdown-toggle::after{
    display: none;
}

Если вы копируете существующий пример раскрывающегося списка Bootstrap, тег кнопки меню выглядит примерно так:

<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Name</button>

удаление dropdown-toggle класс удаляет стрелку (или курсор):

<button class="btn btn-primary" type="button" data-toggle="dropdown">Menu Name</button>

добавить .dropdown-toggle-split класса в теге


единственное, что сработало для меня, это то, что я удалил class="caret" Если вы используете раскрывающийся список bootstrap. Надеюсь, это сработает и для тебя.