Bootstrap의 누적 행에서 간격 해결

포트폴리오 페이지에 대한 Bootstrap 그리드를 구성할 때 타일이 길수록 쌓을 때 레이아웃에 간격이 생기는 문제가 발생할 수 있습니다. 발생합니다. 이 문제는 그리드 내 요소의 높이가 다양하기 때문에 발생합니다. 이 문제를 해결하기 위해 다음과 같은 몇 가지 솔루션이 있습니다.

1. 모든 포트폴리오 요소에 대한 높이 설정: 각 포트폴리오 요소에 대해 고정 높이를 설정하면 일관된 스택이 보장되고 간격이 사라집니다.
2. 동적 피팅을 위해 Masonry 사용: Masonry는 사용 가능한 공간에 맞게 요소를 동적으로 배열하여 다양한 콘텐츠에서도 간격을 없애는 레이아웃 도구입니다. lengths.
3. 반응형 클래스 및 Clearfix 사용: Bootstrap 문서의 "반응형 열 재설정"에 정의된 대로 이 접근 방식에는 반응형 클래스 및 Clearfix를 사용하여 다양한 중단점에서 그리드 정렬 문제를 해결하는 작업이 포함됩니다.
4. jQuery를 사용하여 열 높이를 동적으로 조정: jQuery를 사용하여 높이를 조정할 수 있습니다. 동적으로 열을 정렬하여 콘텐츠 길이에 관계없이 적절하게 정렬되도록 합니다.

문제를 해결하는 특정 기술은 다음과 같습니다.

각 그리드 요소 뒤에 Clearfix div를 추가합니다.

    

        ...
    
    

clearfix div에 미디어 쿼리를 적용하여 부동 소수점을 지웁니다.

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
        clear: both;
    }
}

이 접근 방식은 다음을 제공합니다.

• 읽기 쉽고 유지 관리가 가능한 마크업: HTML은 단순하여 포트폴리오 요소를 쉽게 관리할 수 있습니다.
• 다양한 화면 크기에 따른 정렬: CSS는 요소가 모든 공통 중단점에 정렬되도록 보장하여 간격.