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

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

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

Jsfiddle здесь .

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

Просто удалите из элемента класс «dropdown-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>

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

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

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

• .dropdown-toggleимеет больше стиля, чем просто курсор. Удаление класса из элемента вызывает проблемы со стилем .

• Переопределение .dropdown-toggleне имеет смысла. Тот факт, что вам не нужен курсор на каком-то конкретном элементе, не означает, что он вам не понадобится позже.

• ::afterне охватывает варианты раскрывающегося списка (некоторые используют ::before).

Используйте кастом .caret-offв том же элементе, что и ваш .dropdown-toggleэлемент:

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

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

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

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

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

$enable-caret: true !default;

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

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

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

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

Boostrap генерирует это с помощью границы CSS:

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

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

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

вы пробовали tag = "a" в классе? он скрывает стрелку без дополнительных css.

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

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

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