[css] Bootstrap 4의 드롭 다운에서 화살표를 제거하는 방법은 무엇입니까?

저는 Bootstrap 4를 사용하고 있습니다. 드롭 다운에서 화살표를 제거하려고했습니다.

답변 내가 부트 스트랩 3 발견은 더 이상 작동하지 않습니다.

<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”클래스를 제거하기 만하면됩니다. 다음과 같은 data-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내에서 false로 위의 변수 세트 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>