응답성을 유지하면서 특정 Div에서 부트스트랩 거터를 제거하는 방법은 무엇입니까?

Bootstrap 응답성에 영향을 주지 않고 특정 Div의 여백 공간을 제거하는 방법

Bootstrap 레이아웃에서 여백은 열 사이에 일반적으로 약 20-30px 너비의 공백을 만듭니다. . 이는 시각적으로 매력적인 분리를 제공하지만 레이아웃의 응답성을 방해하지 않고 특정 div에 대해 이 여백을 제거하려는 경우가 있을 수 있습니다.

Bootstrap 3 솔루션

Bootstrap 3의 경우 거터를 생성하기 위해 여백 대신 패딩을 사용하기 때문에 거터 제거가 더 간단해졌습니다. CSS 코드는 다음과 같습니다.

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

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

Bootstrap 3에서 특정 div의 여백을 제거하려면 해당 행에 "no-gutter" 클래스를 추가하면 됩니다.

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

Bootstrap 4 및 5가지 솔루션

Bootstrap 4에서는 전체 행에서 거터를 제거하는 "no-gutters" 클래스:

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

Bootstrap 5 수평 및 수직 모두를 세밀하게 제어할 수 있는 거터 클래스로 이를 더욱 확장합니다. 간격. 클래스에는 다음이 포함됩니다:

• 홈통이 없는 경우 g-0
• 간격 조정을 위한 g-(1-5)
• 세로 간격 조정을 위한 gy-*
• gx-* 수평 간격 조정

예를 들어, 홈통을 제거하려면 반응성을 유지하면서 특정 div:

#main_content .col {
  padding: 0 !important;
}

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

위 내용은 응답성을 유지하면서 특정 Div에서 부트스트랩 거터를 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!