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

В Bootstrap 3 вы можете легко удалить "карету" (маленькую стрелку, указывающую вниз) из раскрывающегося списка, я не вижу, как это сделать в Bootstrap 4, хотя из-за того, что они больше не используют <span class="caret"></span>.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

Ответ 1

Это сделано в css. Сделайте что-нибудь подобное:

.dropdown-toggle:after { content: none }

Ответ 2

Просто удалите dropdown-toggle!

Вот пример:https://jsfiddle.net/ydnosrLw/

Ответ 3

Вы можете удалить каретку в Bootstrap 4, удалив класс dropdown-toggle из вашего элемента. Поэтому вместо этого:

<button class="btn btn-outline-secondary dropdown-toggle" ...>

Ваша кнопка будет

<button class="btn btn-outline-secondary" ...>

Это не будет иметь никаких побочных эффектов, и он будет по-прежнему функционировать должным образом в качестве выпадающего списка.

Ответ 4

В Bootstrap 4 вы можете удалить выпадающую кнопку формы каретки, установив переменную sass $enable-caret false. Но вы должны установить эту переменную перед импортом файла sass начальной загрузки.

// Your variable overrides
$enable-caret: false

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";