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

응답성을 저하하지 않고 특정 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!