Я использую 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>
css
twitter-bootstrap
twitter-bootstrap-4
Хунбо Мяо
источник
источник
!important
:)С помощью css вы можете просто сделать это:
источник
!important
чтобы этот пользовательский CSS вступил в силу.Я не рекомендую ни один из существующих ответов, потому что:
.dropdown-toggle
имеет больше стиля, чем просто курсор. Удаление класса из элемента вызывает проблемы со стилем .Переопределение
.dropdown-toggle
не имеет смысла. Тот факт, что вам не нужен курсор на каком-то конкретном элементе, не означает, что он вам не понадобится позже.::after
не охватывает варианты раскрывающегося списка (некоторые используют::before
).Используйте кастом
.caret-off
в том же элементе, что и ваш.dropdown-toggle
элемент:источник
dropdown-toggle
.удалить класс "dropdown-toggle"
источник
Если вы заинтересованы в замене стрелки другим значком (например, FontAwesome), вам просто нужно удалить границу на псевдоэлементе .dropdown-toggle
источник
Я довольно долго использовал принятый ответ в своем проекте, но только сейчас наткнулся на переменную, используемую загрузкой :
Если вы установите значение false, то каретка будет удалена без необходимости выполнять какой-либо специальный код.
Мой проект был Ruby / Rails, поэтому я использовал bootstrap-rubygem . Я изменил переменный путем импорта
custom-variables.scss
с указанным выше набором переменного к ложному в моемapplication.scss
ДО вbootstrap.scss
файле / файлах.источник
Если вы удалите подходящий класс dropdown-toggle, как показано ниже, все кнопки раскрывающегося списка в вашей системе больше не будут иметь каретки.
Но, возможно, это не то, что вы хотите, поэтому, чтобы удалить только конкретную кнопку, мы собираемся вставить класс с именем: remoecaret, и мы подгоним класс: dropdown-toggle следующим образом:
и наш html выглядит примерно так:
источник
Boostrap генерирует это с помощью границы CSS:
источник
Если вы хотите только в этом классе кнопок начальной загрузки, сделайте:
источник
вы пробовали tag = "a" в классе? он скрывает стрелку без дополнительных css.
источник
Добавить без стрелки в раскрывающееся объявление класса переключения
источник
Это работает на bootsrap4 и ng-bootstrap.
источник