음수 여백 없이 부트스트랩 열 거터를 제거하는 방법은 무엇입니까?

음수 여백을 사용하지 않고 부트스트랩에서 열 여백 제거

문제:

열 사이의 기본 30px 간격을 제거하는 방법 음수 설정에 의존하지 않고 부트스트랩에서 여백?

해결책:

Bootstrap 버전에 따라 권장되는 접근 방식은 다음과 같습니다.

Bootstrap 5:

• 신규 접근 방식: .g-0 클래스를 활용하여 .row 내의 거터를 제거합니다.
• 행 거터: 특정 중단점을 위해 설계된 거터 클래스(예: .gx)를 적용하여 응답성을 향상합니다. -작은 홈통의 경우 수평 홈통의 경우 sm-4 스크린).

Bootstrap 4:

• 단순화: .row에서 직접 .no-gutters 클래스를 구현합니다. .
• 코드 예:

<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 :

• 클래스 기반: 새로 사용 .row-no-gutters 도입 class.

Bootstrap 3 , <= 3.3.9:

• 패딩 조정: 클래스 내의 패딩을 수정합니다. 열에 사용자 정의 .no-gutter 클래스를 추가합니다. .row.
• CSS 코드:

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

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