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

카드 하단의 부트스트랩 버튼 정렬

문제 설명

Bootstrap의 카드 데크 및 카드 클래스로 작업할 때 정렬 오류가 발생할 수 있습니다. 카드 내용의 크기는 다양합니다. 이 문제는 각 카드 하단에 있는 버튼을 수직으로 정렬하려고 할 때 특히 분명합니다.

해결책

Bootstrap 4는 이러한 정렬 문제에 대한 우아한 솔루션을 제공하는 수정자 클래스를 제공합니다.

1. .card-body에 d-flex 추가
2. .card-body에 flex-column 추가
3. .card-body 내에 중첩된 .btn 요소에 mt-auto를 추가합니다. 카드 본문

코드 수정

<div class="card-deck">
  <div class="card">
    <div class="card-body d-flex flex-column">
      <p class="card-text">Card 1 content</p>
      <button type="button" class="btn btn-primary mt-auto">Button 1</button>
    </div>
  </div>
  <div class="card">
    <div class="card-body d-flex flex-column">
      <p class="card-text">Card 2 content</p>
      <button type="button" class="btn btn-primary mt-auto">Button 2</button>
      <button type="button" class="btn btn-primary mt-auto">Button 3</button>
    </div>
  </div>
</div>

결론

이러한 수정자 클래스를 활용하면 콘텐츠 변형에 관계없이 카드 하단의 버튼이 자동으로 정렬됩니다. 이를 통해 일관되고 시각적으로 매력적인 프레젠테이션이 보장됩니다.

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