CSS를 사용하여 Bootstrap에서 다양한 높이의 Div를 쌓는 방법은 무엇입니까?

CSS를 사용하여 Bootstrap에서 다양한 높이의 Div 쌓기

이 시나리오에서 Bootstrap의 행 시스템은 다음 항목의 범주를 최적으로 표시하는 데 어려움을 겪습니다. 다양한 높이. masonry 플러그인을 사용하지 않고 이 문제를 해결하려면 다음 CSS 솔루션을 고려하십시오.

1. 반응형 스태킹을 위해 표시되는 클래스 활용:
   .visible-sm 활용 , .visible-md 및 .visible-lg 클래스는 Clearfix와 함께 사용됩니다. 이렇게 하면 화면 크기에 따라 부동 소수점이 적절하게 지워집니다.

   <div class="clearfix visible-md visible-lg"></div>
   <div class="clearfix visible-sm"></div>

2. 구현 예:
   다음은 서로 다른 두 범주에 대한 간단한 데모입니다. 높이:

   <div class="row">
       <div class="col-md-6">
           <div class="category-div">

3. 추가 참고 사항:

   • .visible-sm은 작은 화면의 부동 소수점을 지웁니다(<=768px).
   • .visible-md는 중간 화면의 플로트를 지웁니다. (>768px)
   • .visible-lg는 대형 화면의 플로트를 지웁니다(>1200px)
   • 스타일="높이: ...;"를 조정합니다. 특정 카테고리 div 높이에 적합한 속성
   • 부동 소수점을 효과적으로 지우려면 클리어픽스 클래스가 열 외부에 적용되는지 확인하세요

이 기술을 구현하면, Bootstrap의 그리드 시스템 내에서 높이가 다양한 div 요소의 반응형 스택을 달성할 수 있습니다. 이 접근 방식은 Bootstrap과 호환되는 순수 CSS 솔루션을 제공하여 최적의 레이아웃 시각화에 대한 요구를 해결합니다.

위 내용은 CSS를 사용하여 Bootstrap에서 다양한 높이의 Div를 쌓는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!