Bootstrap 누적 행의 간격을 수정하는 방법은 무엇입니까?
- Barbara Streisand원래의
- 2024-11-06 06:17:021081검색
Bootstrap 누적 행에 간격이 있습니까?
큰 화면 크기에서 작은 화면 크기로 쌓이는 Bootstrap 그리드를 만들 때 다음과 같은 경우에 간격이 발생하는 것이 일반적입니다. 내용이 긴 항목은 쌓인 순서를 방해합니다. 이 문제를 해결하기 위한 몇 가지 솔루션은 다음과 같습니다.
1. 요소 높이 설정:
포트폴리오 그리드의 모든 요소에 고정 높이를 지정합니다.
2. Masonry 사용:
사용 가능한 공간에 맞게 요소 크기를 동적으로 조정하는 masonry.js와 같은 라이브러리를 사용하세요.
3. 반응형 클래스 및 Clearfix:
Bootstrap 문서의 "반응형 열 재설정"에 설명된 대로 반응형 클래스를 사용하고 그리드의 각 요소 뒤에 "clearfix" 클래스가 있는 div를 추가하여 공백을 방지하세요.
4. jQuery 높이 조정:
jQuery를 사용하여 그리드 내 최대 높이를 기준으로 열 높이를 동적으로 조정합니다.
Responsive Class 및 Clearfix 접근 방식 사용 예:
그리드의 각 요소에 "clear" 클래스를 추가합니다.
`<div>
<div>
다음에 CSS 추가 다양한 중단점 처리:
@media (max-width: 767px) {
.portfolio>.clear:nth-child(6n)::before {
content: '';
display: table;
clear: both;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.portfolio>.clear:nth-child(8n)::before {
content: '';
display: table;
clear: both;
}
}
@media (min-width: 1200px) {
.portfolio>.clear:nth-child(12n)::before {
content: '';
display: table;
clear: both;
}
}위 내용은 Bootstrap 누적 행의 간격을 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.