Bootstrap 4의 카드 열을 사용하여 석조 레이아웃을 얻는 방법은 무엇입니까?

Bootstrap 4에서 Flexbox를 사용하여 석조 레이아웃을 만드는 방법

Bootstrap 4의 Flexbox 그리드 시스템을 사용하면 유연하고 반응성이 뛰어난 열 레이아웃이 가능합니다. 행 내에서 항목의 높이가 다양한 벽돌 기둥 레이아웃을 만들려면 Bootstrap의 카드 열 기능을 활용할 수 있습니다.

카드 열 사용

Bootstrap에 명시된 대로 문서:

"CSS만 사용하여 카드를 벽돌과 같은 열로 구성할 수 있습니다. .card-columns. 카드는 더 쉬운 정렬을 위해 flexbox 대신 CSS 열 속성으로 구성됩니다. 카드는 위에서 아래로, 왼쪽에서 오른쪽으로 정렬됩니다."

석조 레이아웃을 만들려면 .card 요소를 래핑하기만 하면 됩니다. .card-columns 컨테이너 내.

예 코드

다음은 Bootstrap 4의 카드 열 기능을 사용한 석조 레이아웃의 예입니다.

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <blockquote class="blockquote mb-0 card-body">...</blockquote
    </div>
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card bg-primary text-white text-center p-3">
      <blockquote class="blockquote mb-0">...</blockquote>
    </div>
    <div class="card text-center">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <img class="card-img" src="..." alt="Image">
    </div>
    <div class="card p-3 text-right">
      <blockquote class="blockquote mb-0">...</blockquote
    </div>
    <div class="card">
      <div class="card-body">...</div>
    </div>
  </div>
</div>

이 카드 열 기능을 통합하면 별도의 작업 없이 석조 레이아웃을 쉽게 만들 수 있습니다. 사용자 정의 CSS 또는 Flexbox 배열이 필요합니다.

위 내용은 Bootstrap 4의 카드 열을 사용하여 석조 레이아웃을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!