CSS Clearfix를 사용하여 부트스트랩 행에서 높이가 고르지 않은 Div를 수직으로 정렬하는 방법은 무엇입니까?

CSS Clearfixes를 사용하여 Bootstrap에서 높이가 균일하지 않은 Div의 수직 정렬

목표는 Bootstrap 행 내에서 다양한 높이의 div를 수직으로 정렬하는 것입니다. Masonry와 같은 외부 플러그인을 사용합니다. CSS 솔루션은 다음과 같습니다.

제공된 HTML 구조에서 각 카테고리는 "menu-category" 클래스가 있는 div로 표시됩니다. 이러한 div는 각 카테고리 내의 다양한 항목으로 인해 높이가 다릅니다. 원하는 스태킹을 달성하기 위해 Bootstrap의 가시성 클래스를 활용할 수 있습니다.

구체적으로 가시성 수정자와 함께 "clearfix" 클래스를 추가하여 div 레이아웃에서 부동 소수점을 선택적으로 지울 수 있습니다. 예를 들어 중간 및 대형 화면 크기에서만 부동 소수점을 지우려면 다음 코드를 사용하면 됩니다.

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

마찬가지로 작은 화면 크기에서만 부동 소수점을 지우려면 다음 코드를 사용하세요.

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

이러한 삭제 div를 HTML 구조의 적절한 위치에 추가하면 플로팅 div가 다음 줄로 줄 바꿈되어 강제로 쌓이는 것을 방지할 수 있습니다.

예:

  

    ...
  
  

    ...
    <div class="clearfix visible-sm"></div>
  
  

    ...
  
  

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

    ...
  

이 접근 방식을 사용하면 div 높이가 콘텐츠에 따라 동적으로 조정되어 행 컨테이너 내에 깔끔하게 쌓이게 됩니다.

위 내용은 CSS Clearfix를 사용하여 부트스트랩 행에서 높이가 고르지 않은 Div를 수직으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!