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

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

저는 부트스트랩 4를 사용하고 있습니다.화살표를 드롭다운으로 제거하려고 했습니다.

부트스트랩 3에 대한 답변이 더 이상 작동하지 않습니다.

jsfidle 여기 있습니다.

<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클래스 스타일은 모든 드롭다운에 영향을 미치며 다른 버튼에 화살표를 계속 표시하기를 원할 수 있습니다. 이것이 제가 보기에 가장 간단한 해결책인 것 같습니다.

편집: 보관dropdown경계 스타일을 유지하려면 클래스

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

일부는 추가해야 한다고 말했습니다.!important하지만 YMMV.

을 제거합니다.dropdown-toggle학급

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

이것도 시도해 볼 수 있습니다.

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

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

저는 제 프로젝트에서 꽤 오랫동안 승인된 답변을 사용했지만, 방금 부트스트랩에서 사용하는 변수를 우연히 발견했습니다.

$enable-caret: true !default;

이 값을 false로 설정하면 사용자 지정 코드를 수행할 필요 없이 캐럿이 제거됩니다.

제 프로젝트가 루비/레일즈여서 부트스트랩-루비젬을 사용하고 있었습니다.변수를 가져와 변경했습니다.custom-variables.scss위의 변수가 내 안에서 거짓으로 설정된 상태에서.application.scss 이전에bootstrap.scss파일/파일

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

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

하지만 원하는 것이 아닐 수도 있으므로 특정 버튼만 제거하기 위해 remecare라는 클래스를 삽입합니다. 그러면 클래스에 맞게 드롭다운-토글을 다음과 같이 적용합니다.

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

부스트랩은 CSS 경계를 사용하여 다음을 생성합니다.

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

이 부트스트랩 버튼 클래스에서만 사용하려면 다음을 수행합니다.

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

수업 시간에 태그="a"를 시도해 보셨습니까?추가 CSS 없이 화살표를 숨깁니다.

드롭다운 클래스 선언에 화살표 없음 추가

이것은 bootrap4와 ng-bootstrap에서 작동합니다.

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

언급URL : https://stackoverflow.com/questions/38576503/how-to-remove-the-arrow-in-dropdown-in-bootstrap-4