Bootstrap 그리드 시스템에서 거터 공간을 제거하는 방법은 무엇입니까?

특정 Div의 여백 제거

소개

Bootstrap 그리드 시스템은 열 사이에 30px의 기본 여백을 사용합니다. 깔끔하고 일관된 레이아웃에 기여합니다. 그러나 행 내의 특정 요소에 대해 이 여백 공간을 제거하는 것이 바람직할 수 있습니다. 이 기사에서는 Bootstrap의 응답성을 저하하거나 보기 흉한 빈 공간을 도입하지 않고 이 목표를 달성할 수 있는 기술을 살펴봅니다.

Bootstrap 3.x

Bootstrap 3.x의 경우 솔루션은 다음과 같습니다. 더 간단합니다. 이제 홈통을 만드는 데 패딩이 사용되어 제거가 더 쉬워졌습니다. 다음 CSS를 구현하세요.

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

특정 div의 여백을 제거하려면 해당 행에 "no-gutter" 클래스를 할당하기만 하면 됩니다.

Bootstrap 4.x

Bootstrap 4.x에는 "no-gutters" 유틸리티 클래스가 내장되어 있습니다. 원하는 효과를 얻을 수 있습니다.

<div class="row no-gutters">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Bootstrap 5.x

최신 Bootstrap 버전에서는 거터 클래스 도입으로 거터 간격을 더욱 세밀하게 제어할 수 있습니다. 홈통을 완전히 제거하려면 "g-0"을 활용하거나 "g-1-5" 클래스를 사용하여 조정하세요. 이러한 클래스는 768px보다 작은 화면의 수평 여백을 조정하기 위해 "gx-sm-4"와 같은 중단점을 사용하여 반응적으로 적용할 수도 있습니다.

위 내용은 Bootstrap 그리드 시스템에서 거터 공간을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!