Як видалити стрілку в спадному меню в 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>

Просто видаліть з елемента клас "спад-перемикання". Випадаюче все ще працюватиме, якщо у вас є атрибут перемикання даних наступним чином

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

видаліть клас "спадний перемикач"

Якщо вам цікаво замінити стрілку на іншу піктограму (наприклад, FontAwesome), вам просто потрібно буде видалити рамку на псевдоелементі .dropdown-toggle

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

Я досить довго використовував прийняту відповідь у своєму проекті, але зараз натрапив на змінну, яку використовує bootstrap :

$enable-caret: true !default;

Якщо встановити це значення false, карету буде видалено без необхідності робити спеціальний код.

Моїм проектом був Ruby / Rails, тому я використовував bootstrap-rubygem . Я змінив змінну, імпортувавши custom-variables.scssвищевказану змінну, встановлену на помилкову, application.scss перед тим як bootstrap.scssфайл / файли.

Якщо ви вилучите відповідний клас перемикання клавіш, як показано нижче, всі кнопки, що випадають у вашій системі, більше не матимуть карети.

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