> 웹 프론트엔드 > CSS 튜토리얼 > Bootstrap의 특정 Div에서 거터 공간을 제거하는 방법은 무엇입니까?

Bootstrap의 특정 Div에서 거터 공간을 제거하는 방법은 무엇입니까?

DDD
풀어 주다: 2024-11-22 11:53:15
원래의
751명이 탐색했습니다.

How to Remove Gutter Space from a Specific Div in Bootstrap?

응답성을 저하하지 않고 특정 Div에 대해서만 여백 공간 제거

Bootstrap 그리드 시스템에는 일반적으로 열 사이에 기본 여백 공간이 포함되어 있습니다. 시각적으로 더 매력적인 레이아웃. 그러나 특정 시나리오에서는 특정 div에 대해 이 여백 공간을 제거하고 싶을 수도 있습니다.

Bootstrap 5 솔루션:

Bootstrap 5는 유연성을 제공하는 전용 여백 클래스를 도입합니다. 그리드 전체에 걸쳐 홈통 간격을 조정합니다. 특정 div의 거터를 제거하려면 g-0 클래스를 활용하세요. 또한 gx-* 및 gy-* 클래스를 사용하여 수평 및 수직 거터를 각각 사용자 정의하고 다양한 중단점에서 응답성을 유지할 수 있습니다.

Bootstrap 4 솔루션:

In Bootstrap 4에서는 이를 달성하는 것이 간단합니다. 프레임워크에는 특정 행에 적용할 수 있는 거터 없는 클래스가 포함되어 있어 해당 행 내의 모든 열에 대한 거터 공간을 효과적으로 제거합니다.

Bootstrap 3 솔루션:

Bootstrap 3의 경우 접근 방식이 약간 다릅니다. 여백 대신 여백을 사용하므로 원하는 div에 다음 CSS를 적용할 수 있습니다.

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

.no-gutter [class*='col-']:not(:first-child),
.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}
로그인 후 복사

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿