Bootstrap의 카드 데크 및 카드 클래스로 작업할 때 정렬 오류가 발생할 수 있습니다. 카드 내용의 크기는 다양합니다. 이 문제는 각 카드 하단에 있는 버튼을 수직으로 정렬하려고 할 때 특히 분명합니다.
Bootstrap 4는 이러한 정렬 문제에 대한 우아한 솔루션을 제공하는 수정자 클래스를 제공합니다.
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
