Bootstrap 4의 Flexbox Grid를 사용하여 석조 레이아웃을 구현하는 방법은 무엇입니까?

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

Bootstrap 4에서는 Flexbox를 활용하여 석조 기둥 레이아웃을 구현할 수 있습니다. 카드 열을 활용하여 그리드를 구성하세요. 기능.

해결책:

아래와 같이 카드 요소를 .card-columns 컨테이너에 넣습니다.

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

설명:

• .card-columns 클래스는 CSS 열을 사용하여 위에서 아래로, 왼쪽에서 오른쪽으로 카드를 정렬합니다.
• 카드는 열을 가로질러 깨지는 것을 방지하기 위해 인라인 블록으로 표시됩니다.
• 열 때문에 -break-inside: 피하기는 아직 완벽한 솔루션이 아니므로 여전히 일관성 없는 열이 발생할 수 있습니다. 높이.

예:

다음 HTML을 고려하세요.

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-1.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Card-title">Card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-2.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Another-card-title">Another card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-3.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Card-with-long-title">Card with long title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-4.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Another-card-with-even-more-text">Another card with even more text</h5>
        <p class="card-text">...</p>
      </div>
    </div>
  </div>
</div>

이렇게 하면 카드가 포함된 석조 레이아웃이 생성됩니다. 콘텐츠 높이에 따라 배열하여 시각적으로 매력적이고 역동적인 그리드를 만듭니다.

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