[Bootstrap] 드롭다운 버튼의 아이콘을 변경&「드롭다운이 버튼에 대해 오른쪽 하단으로 나간다!」와 「선택하에 이상한 여백이!?」를 해소

개요

표제대로이지만, 길기 때문에 아래에 정리합니다.

1. 드롭다운 버튼 아이콘을 변경합니다.
2. 드롭다운이 버튼에 대해 오른쪽 하단으로 나간다!」를 해소.
3. "선택지 아래에 이상한 여백이!?"를 해소.

모두 간단합니다만, 2.3에 조금 빠졌으므로 메모를 겸해 공유하겠습니다.

환경

Ruby:2.6.3
Rails:5.1.6
bootstrap:4.4.1
FontAwesome

방법

1. 드롭다운 버튼 아이콘을 변경합니다.
-button.btn.dropdown-toggle 안에 Fontawesome(i 태그)를 통상대로 배치.
- 기본 버튼을 지웁니다(.dropdown-toggle::after { display: none; }).

2. 드롭다운이 버튼에 대해 오른쪽 하단으로 나간다!」를 해소.
div.dropdown-menu에 dropdown-menu-right 클래스를 추가.
→position:absolute 관련의 left 프로퍼티의 값을 만지고 있었지만, 이것만으로 좋았다.
요컨대, 드롭다운 메뉴의 기점이 버튼에 대해 좌상(디폴트)으로 되어 있는 것을 우상단으로 변경한다.

3. "선택지 아래에 이상한 여백이!?"를 해소.
div.dropdown-item (아래 link_to 메소드 (HTML에서는 a 태그)) 뒤에 몇 개의 반각 공간
→ 이것이 선택의 내용으로 인식되고 있었기 때문에, 선택의 아래의 「이상한 여백」으로서 반영되고 있었다.

home.html.erb

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton", data-toggle="dropdown">        
    <i class="fas fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu dropdown-menu-right">
  <%= link_to "削除する", dreampost, class: 'dropdown-item', method: :delete,
                                        data: { confirm: "削除してよろしいですか？" } %>
  </div>
</div>

custom.scss

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

보충

드롭다운 버튼의 아이콘은 상위 요소에 display:flex 및 justify-content:space-between으로 오른쪽 가장자리를 표시합니다.

지적 등 있으시면 꼭 부탁드립니다.