Как удалить стрелку в раскрывающемся списке в Bootstrap 4?

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

Ответы , которые я нашел для Bootstrap 3, больше не работают.

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

Ответы

Ответ 1

Просто удалите класс dropdown-toggle из элемента. Раскрывающийся список все равно будет работать, если у вас есть атрибут data-toggle следующим образом

<button role="button" type="button" class="btn" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

переопределение стилей класса .dropdown-toggle влияет на все выпадающие списки, и вы можете захотеть сохранить стрелку на других кнопках, поэтому это выглядит для меня самым простым решением.

Изменение: сохранить выпадающий класс, если вы хотите сохранить стиль границы

<button role="button" type="button" class="btn dropdown" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

Ответ 2

С помощью CSS вы можете просто сделать это:

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

Ответ 3

Я не рекомендую ни один из существующих ответов, потому что:

.dropdown-toggle имеет больше стиля, чем просто каретка. Удаление класса из элемента вызывает проблемы с оформлением.
Переопределение .dropdown-toggle не имеет смысла. То, что вам не нужна каретка на каком-то конкретном элементе, не означает, что она вам не понадобится позже.
::after не охватывает выпадающие варианты (некоторые используют ::before).

.caret-off используйте пользовательский .caret-off:

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}

Ответ 4

удалите класс "dropdown-toggle"

Ответ 5

Если вы заинтересованы в замене стрелки другим значком (например, FontAwesome), вам просто нужно удалить границу на псевдоэлементе .dropdown-toggle

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

Ответ 6

Я использовал принятый ответ довольно давно в своем проекте, но сейчас наткнулся на переменную используемую bootstrap:

$enable-caret: true !default;

Если вы установите для этого значение false, то каретка будет удалена без необходимости выполнять какой-либо пользовательский код.

Мой проект был Ruby/Rails, поэтому я использовал bootstrap-rubygem. Я изменил переменную, импортировав custom-variables.scss, указав указанную выше переменную в false в файле application.scss ПЕРЕД bootstrap.scss.

Ответ 7

Boostrap генерирует это используя CSS-границу:

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

Ответ 8

Если вы удалите fit из выпадающего класса, как показано ниже, все выпадающие кнопки в вашей системе больше не будут иметь каретки.

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

Но, возможно, это не то, что вам нужно, поэтому, чтобы удалить только определенную кнопку, мы собираемся вставить класс с именем: remoecaret, и подгоним класс: dropdown-toggle следующим образом:

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

и наш HTML выглядит примерно так:

<div class="btn-group">
  <button class="btn btn-outline-secondary btn-sm dropdown-toggle removecaret" data-toggle="dropdown">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#"><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>&nbsp;Edit</a></li>
  </ul>
</div>

Ответ 9

О, я нашел способ:

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

Ответ 10

Вы можете сделать это.

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

Ответ 11

Если вы хотите точно только в этом классе кнопки начальной загрузки, сделайте:

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

Ответ 12

Добавить без стрелки в раскрывающееся объявление класса переключателя

Ответ 13

Это работает на bootsrap4 и ng-bootstrap.

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