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


118

저는 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>

답변:


176

요소에서 "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>

3
어떤 이유로 다른 솔루션이 작동하지 않았습니다. 저는 Bootstrap 4를 실행하고 있습니다. 이것이 유일한 효과였습니다.
anonymousacorn

9
이것은 저에게 효과적이지 않았습니다. 버튼의 오른쪽이 더 이상 둥글 지 않습니다.
Jace Browning

함께 사용자 정의 CSS를 작성하는 것보다 간단한 !important:)
hughjdavey

2
나는 이것을 테스트했고 꽤 잘 작동합니다! FF, Chrome, IE 및 Opera에서 테스트되었습니다. 브라우저가 내장 된 모바일 Android 기기에서도 성가신 화살표가 없습니다. 감사합니다. 주의 : 전체 "dropdown-toggle"속성을 제거하지 말고 "-toggle"속성 만 제거하면 드롭 다운 메뉴에 대한 스타일이 제거되지 않습니다. 그래서 "dropdown-toggle"은 "dropdown"으로 바뀝니다. 이것이 도움이되기를 바랍니다.
Kerim Yagmurcu

126

CSS를 사용하면 다음과 같이 할 수 있습니다.

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

11
!important이 사용자 지정 CSS를 적용 하려면 포함 해야했습니다.
Jace Browning

1
이는 동일한 CSS를 사용하는 경우 다른 페이지에서 사용되는 모든 드롭 다운에 영향을줍니다.
Pavan Nath

버튼에 대한 화살표 만 비활성화하려면 접두사를 더 추가하십시오. 예 : .btn.btn-outline-secondary.dropdown-toggle :: after {display : none! important; }
puppylpg

35

다음과 같은 이유로 기존 답변을 권장하지 않습니다.

  • .dropdown-toggle캐럿보다 더 많은 스타일이 있습니다. 요소에서 클래스를 제거하면 스타일 문제가 발생 합니다 .

  • 재정의 .dropdown-toggle는 의미가 없습니다. 특정 요소에 캐럿이 필요하지 않다고해서 나중에 캐럿이 필요하지 않다는 의미는 아닙니다.

  • ::after드롭 다운 변형을 다루지 않습니다 (일부 사용 ::before).

.caret-off요소와 동일한 요소에서 사용자 정의 를 사용하십시오 .dropdown-toggle.

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}

3
가장 좋은 대답은 다른 사람들을 위해 추가 정보를 추가하는 것입니다 dropdown-toggle. 이 클래스는 .
eestein


5

화살표를 다른 아이콘 (예 : FontAwesome)으로 바꾸려는 경우 .dropdown-toggle의 유사 요소에서 테두리를 제거하면됩니다.

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

4

내 프로젝트에서 꽤 오랫동안 받아 들여진 대답을 사용했지만 방금 부트 스트랩에서 사용 하는 변수를 발견 했습니다 .

$enable-caret: true !default;

이것을 false로 설정하면 사용자 정의 코드를 수행하지 않고도 캐럿이 제거됩니다.

내 프로젝트는 Ruby / Rails 였으므로 bootstrap-rubygem을 사용했습니다 . 나는을 가져 변수를 변경 custom-variables.scss내에서 false로 위의 변수 세트 application.scss bootstrap.scss 파일 / 파일.


2

아래와 같이 드롭 다운-토글 클래스에 적합을 제거하면 시스템의 모든 드롭 다운 버튼에 더 이상 캐럿이 없습니다.

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

1

Boostrap은 CSS 테두리를 사용하여이를 생성합니다.

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

1

이 부트 스트랩 버튼 클래스에서만 정확히 원하는 경우 다음을 만드십시오.

.btn .dropdown-toggle::after {
    display:none;
}

0

수업 내에서 tag = "a"를 사용해 보셨습니까? 추가 CSS없이 화살표를 숨 깁니다.



-2

이것은 bootsrap4 및 ng-bootstrap에서 작동합니다.

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

3
두 살짜리 대답을 복사했지만 오타가 있습니다.
miken32
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.