Bootstrap에서 거터를 어떻게 제거할 수 있습니까?

Bootstrap에서 거터 제거: 종합 가이드

소개

Bootstrap으로 작업할 때, 열 사이의 30px 여백은 때때로 디자인에 방해가 될 수 있습니다. 이 기사에서는 음수 여백을 설정하지 않고 이 여백을 제거하는 다양한 방법을 살펴보겠습니다.

Bootstrap 5

Bootstrap 5의 최신 버전에는 전용 클래스가 도입되었습니다. , .no-gutters(.row 요소에 추가하여 모든 수평 및 수직 제거 가능) 거터.

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

또한 Bootstrap 5는 열 사이의 간격을 반응적으로 미세 조정하기 위한 다양한 새로운 거터 클래스를 제공합니다.

Bootstrap 4

Bootstrap 4의 경우 .no-gutters 클래스를 .row 요소에 사용하여 다음을 수행할 수도 있습니다. 거터를 제거하세요.

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

Bootstrap 3.4.0

Bootstrap 3.4.0에서는 거터 제거를 위해 특별히 설계된 .row-no-gutters 클래스를 도입했습니다.

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

부트스트랩 3 , <= 3.3.9

3.4.0 이전 Bootstrap 3 버전의 경우 거터는 패딩을 사용하여 생성됩니다. 이를 제거하려면 사용자 정의 CSS 클래스를 정의하면 됩니다.

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

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
그런 다음 .no-gutter 클래스를 .row 요소에 추가하세요.
위 내용은 Bootstrap에서 거터를 어떻게 제거할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!