다양한 버전의 부트스트랩에서 거터를 어떻게 제거합니까?

Bootstrap에서 여백 제거

Bootstrap에서 열은 30px 여백으로 구분되지만 제거가 필요한 경우가 있습니다. 이 기사에서는 margin-left:-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 4

Bootstrap 4도 .no-gutters 클래스, 부트스트랩과 유사 5:

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

Bootstrap 4에는 반응형 거터 클래스도 포함되어 있어 더 많은 유연성을 제공합니다.

<!-- Remove gutters on small and above breakpoints -->
<div class="row g-0 g-sm-3">
  <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>

Bootstrap 3(

이전 부트스트랩 버전(3~3.3.9), 여백을 제거하려면 여백과 여백을 모두 조정해야 합니다. padding:

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

/* .row > [class*="col-"] */
.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.no-gutter 클래스를 .row에 추가하면 다음과 같이 설정됩니다.

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

활용 이러한 기술을 사용하면 Bootstrap에서 거터를 쉽게 제거하고 원하는 시각적 레이아웃을 얻을 수 있습니다.

위 내용은 다양한 버전의 부트스트랩에서 거터를 어떻게 제거합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!