목록 길이가 다양한 부트스트랩 카드 하단의 버튼을 수직으로 정렬하는 방법은 무엇입니까?

목록 길이가 다양한 부트스트랩 카드의 버튼 수직 정렬

부트스트랩 프로젝트에서 시리즈가 있는 상황에 직면할 수 있습니다. 다양한 목록 길이의 카드. 이 카드의 모든 버튼을 아래쪽에 수직으로 정렬하려면 기본 스타일 지정에 어려움을 겪을 수 있습니다.

이 정렬을 달성하려면 다음 Bootstrap 4 수정자 클래스를 사용하는 것이 좋습니다.

• d-flex .card-body
• flex-column을 .card-body로
• mt-auto를 .card-body에 중첩된 .btn으로

이 클래스는 flexbox 레이아웃을 사용하도록 .card-body를 구성하고 수직 방향의 남은 공간을 자동으로 차지하도록 버튼(.btn)을 설정하세요.

실제 데모를 보려면 업데이트된 jsfiddle을 참조하세요.

[jsfiddle link]

추가 고려 사항:

• 간격을 다음과 같이 맞춤 설정할 수 있습니다. mr-auto 또는 ml-auto와 같은 클래스를 사용하여 .btn 요소의 여백을 수정합니다.
• 특정 화면 크기를 타겟팅할 때는 반응형 플렉스 유틸리티(예: d-block, d-md-none)를 사용하는 것이 좋습니다.

이러한 기술을 구현하면 Bootstrap 카드의 버튼이 수직으로 정렬되고 다양한 콘텐츠에 반응하도록 할 수 있습니다. 길이입니다.

위 내용은 목록 길이가 다양한 부트스트랩 카드 하단의 버튼을 수직으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!