[css] Bootstrap 4의 드롭 다운에서 화살표를 제거하는 방법은 무엇입니까?
저는 Bootstrap 4를 사용하고 있습니다. 드롭 다운에서 화살표를 제거하려고했습니다.
답변 내가 부트 스트랩 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>
답변
요소에서 “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> Edit</a></li>
</ul>
</div>
