부트스트랩 열 사이의 거터 간격을 제거하는 방법은 무엇입니까?

Bootstrap에서 열 사이의 여백 간격을 제거하는 방법

Bootstrap의 열 사이의 간격은 원하지 않을 때 시각적으로 어수선한 모습을 만들 수 있습니다. 개별 여백을 설정하지 않고 이 거터 공간을 제거하는 방법은 다음과 같습니다.

Bootstrap 5 이상

Bootstrap 5에서는 .no-gutters 클래스가 .g로 대체되었습니다. -0. .row 요소에서 이를 사용하여 열 사이의 모든 간격을 제거할 수 있습니다.

<div class="row g-0">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Bootstrap 5는 특정 중단점의 간격을 조정할 수 있는 반응형 여백 클래스도 제공합니다. 예를 들어, .gx-sm-4는 '작은' 중단점이 있는 화면(예: 스마트폰)에서만 수평 여백을 제거합니다.

Bootstrap 4

In Bootstrap 4에서는 .no-gutters 클래스를 직접 사용할 수 있습니다. .row:

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

Bootstrap 3.4.0

Bootstrap 3.4에서는 전용 .row-no-gutters 클래스가 도입되었습니다.

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

부트스트랩 3(<= 3.3.9)

Bootstrap 3.3.9 이하에서는 패딩을 사용하여 거터를 생성했습니다. 이를 제거하려면 다음 CSS를 사용해야 합니다.

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

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
.row 요소에 .no-gutter 클래스를 추가합니다.
위 내용은 부트스트랩 열 사이의 거터 간격을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!