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

119

Я использую 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>
Хунбо Мяо
источник

Ответы:

178

Просто удалите из элемента класс «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>
Илтер Каган Оджал
источник
3
По какой-то причине другие решения у меня не работали. Я использую Bootstrap 4. Это единственное, что сработало.
anonymousacorn
9
Для меня это не совсем сработало. Правая часть кнопки больше не закруглена.
Джейс Браунинг
Проще, чем писать собственный CSS с помощью !important:)
hughjdavey
2
Я протестировал это, и он работает очень хорошо! Протестировано в FF, Chrome, IE и Opera - даже на мобильных устройствах Android со встроенным браузером без раздражающей стрелки - большое спасибо, сэр! ВНИМАНИЕ: не удаляйте полностью атрибут «dropdown-toggle», просто удалите атрибут «-toggle», чтобы не избавиться от стиля выпадающего меню. Итак, «dropdown-toggle» превращается в «dropdown» - надеюсь, это поможет.
Керим Ягмурджу
126

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

.dropdown-toggle::after {
    display:none;
}
Клифф
источник
11
Мне также пришлось включить, !importantчтобы этот пользовательский CSS вступил в силу.
Джейс Браунинг
1
Это повлияет на каждое раскрывающееся меню, используемое на других страницах, если вы используете тот же CSS.
Паван Натх
добавьте еще префикс, чтобы отключить стрелку только для кнопки, например: .btn.btn-outline-secondary.dropdown-toggle :: after {display: none! important; }
puppylpg
35

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

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

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

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

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

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}
rybo111
источник
3
Лучший ответ, я бы просто добавил дополнительную информацию для других людей, например, этот класс должен быть добавлен вместе с dropdown-toggle.
eestein 07
12

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

Абдулла Алькурди
источник
4
Это больше похоже на комментарий
mrun
5

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

.dropdown-toggle::after { border: none; }
Логан Франклин
источник
4

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

$enable-caret: true !default;

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

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

Bensmithbwd
источник
2

Если вы удалите подходящий класс 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>
krekto
источник
1

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

.dropdown-toggle:after {
  border: none;
}
туз пик
источник
1

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

.btn .dropdown-toggle::after {
    display:none;
}
S. zbr
источник
0

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

Jerryurenaa
источник
-1

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

Карл Лайнер
источник
-2

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

.dropdown-toggle:after {
    display: none;
}
alvic
источник
3
Копирование принятого ответа двухлетней давности, но с опечаткой.
miken32 08