부트스트랩 카드 하단의 버튼을 정렬하는 방법은 무엇입니까?

Bootstrap 카드 하단의 버튼 정렬

관찰한 바와 같이 Bootstrap 카드 내의 버튼 정렬은 다음과 같은 경우 문제가 될 수 있습니다. 내용의 길이는 다양합니다. 각 카드 하단의 버튼을 효과적으로 정렬하려면:

1. Flexbox 구현: d-flex 클래스를 .card-body 요소에 추가하여 Flexbox 레이아웃을 활성화하세요.
2. 열 정렬 추가: .card-body의 flex-column 클래스를 사용하여 수직으로 정렬합니다. 카드 내의 콘텐츠를 정렬합니다.
3. 여백 자동을 사용하여 버튼 정렬: .card-body 내에 중첩된 .btn 요소에 mt-auto 클래스를 추가합니다. 이렇게 하면 카드 본체 하단의 버튼이 자동으로 정렬되어 남은 공간이 수직으로 채워집니다.

예시를 보려면 다음 코드 스니펫을 참조하세요.

<div class="card">
  <div class="card-body d-flex flex-column">
    <p>Card Content</p>
    <button type="button" class="btn btn-primary mt-auto">Button</button>
  </div>
</div>

구현하여 이 단계를 통해 Bootstrap 카드 내의 모든 버튼이 콘텐츠 변형에 관계없이 해당 하단에 일관되게 정렬되도록 할 수 있습니다.

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