항상 부트 스트랩 드롭 다운 메뉴를 항상 하단에 표시하고 화면이 꺼 지도록합니다.

Question

뷰포트 하단에 드롭 다운 메뉴에 맞출 여유가 없으면 드롭 다운 버튼의 맨 위에 표시됩니다. 이 동작을 변경하고 드롭 다운을 항상 하단에 표시 할 수 있습니까?

<div class="dropdown"> 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Dropdown button 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
    <a class="dropdown-item" href="#">Action</a> 
    <a class="dropdown-item" href="#">Another action</a> 
    <a class="dropdown-item" href="#">Something else here</a> 
    </div> 
</div> 

Answer 1

저는이 문제를 CSS만으로 해결하고 싶었습니다.

부트 스트랩의 드롭 다운은 드롭 다운 메뉴의 위치 지정을 위해 Popper.js를 사용합니다. Popper.js가 창을 스크롤 할 때 드롭 다운의 위치를 ​​확인하고 평가하는 것처럼 보이기 때문에 !important 규칙을 사용하여 Popper.js를 덮어 써야 할 필요가 있기 때문에 작업이 어려워집니다.

다음은 예제를 바탕으로 생각해 봤습니다.

.dropdown-menu{ 
    transform: translate3d(5px, 35px, 0px)!important; 
} 

예 codepen : https://codepen.io/Washable/pen/xPdqVp

이 항상 버튼이 화면 하단에있는 경우에서도, 버튼 아래로 드롭 다운을 강제 할 것이다.