Bootstrap 4의 Flexbox 그리드 및 카드 열을 사용하여 벽돌 레이아웃을 어떻게 만들 수 있습니까?

Bootstrap 4 Flexbox 그리드를 사용하여 석조 레이아웃 구현

Bootstrap 4의 Flexbox 그리드 시스템을 사용하면 높이가 같은 기둥으로 석조 레이아웃을 만드는 것이 어려울 수 있습니다. 그러나 내장된 일부 Bootstrap 클래스를 사용하면 효과적으로 이를 달성할 수 있습니다.

카드 열 기능

Bootstrap 4는 CSS 열 속성을 활용하여 벽돌 격자처럼 카드를 정렬하는 카드 열 기능을 제공합니다. . 이 방법은 정렬 프로세스를 단순화하고 카드가 열에서 분리되는 것을 방지합니다.

<div class="container">
  <div class="card-columns">
    ...Your cards HTML code...
  </div>
</div>

카드를 인라인 블록으로 설정

카드가 열에서 분리되는 것을 방지하려면 다음을 표시하도록 설정하는 것이 좋습니다. 카드 열 컨테이너 내의 인라인 블록. 이는 기본 열 나누기 내부: 회피 스타일이 완전히 신뢰할 수 없기 때문입니다.

.card {
  display: inline-block;
}

예제 코드

다음은 Bootstrap 4 카드를 사용한 석조 레이아웃을 보여주는 예제 코드 조각입니다.

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img src="card-image-1.jpg" class="card-img-top" alt="Card image">
      <div class="card-body">

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