Bootstrap 4의 Flexbox 그리드로 벽돌 레이아웃을 만들 수 있나요?

석조 레이아웃에 Bootstrap 4 Flexbox 그리드 사용

Bootstrap 4는 열 레이아웃에 Flexbox 그리드 시스템을 활용합니다. 그러나 일부 사용자는 이 Flexbox 그리드를 사용하여 기둥의 높이가 다양한 석조 레이아웃을 만드는 것이 가능한지 궁금해할 수 있습니다.

대답은 '예'입니다. 표준 Bootstrap 4 클래스를 사용하면 가능합니다. 문서에는 이 기능을 활성화하는 카드 열에 대한 전용 섹션이 포함되어 있습니다.

카드 열 기능

Bootstrap 4 문서에 명시된 대로:

" 카드는 .card-columns로 래핑하여 CSS만으로 벽돌과 같은 열로 구성할 수 있습니다. 카드는 위에서 아래로, 왼쪽에서 오른쪽으로 정렬됩니다."

구현

카드 열 기능을 사용하려면 .cards를 .card-columns 컨테이너.

<div class="container">
  <div class="card-columns">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
  </div>
</div>

고려 사항

카드 열을 사용하는 것이 모든 상황에서 이상적인 것은 아니라는 점을 명심하세요. 카드가 여러 열로 나누어지는 것을 방지하려면 해당 표시 속성을 inline-block으로 설정하는 것이 좋습니다. 그러나 컬럼 브레이크 내부: 회피 CSS 속성은 아직 완전히 신뢰할 수 있는 솔루션이 아닙니다.

위 내용은 Bootstrap 4의 Flexbox 그리드로 벽돌 레이아웃을 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!