Bootstrap 4.x 및 5.x 그리드 시스템 중단점 재정의

Bootstrap의 xl 중단점을 사용자 정의하려면 지배하는 변수를 이해하는 것이 중요합니다. 중단점 및 컨테이너 너비.

sass
Sass 빌드에서는 $grid-breakpoints 및 $container-max-widths라는 두 가지 변수를 수정해야 합니다. 이러한 변수는 부트스트랩 그리드 시스템과 컨테이너 요소가 스스로 재구성되는 크기 임계값을 정의합니다.

제공된 Sass 코드에서 1280px 중단점을 포함하도록 $grid-breakpoints를 올바르게 조정했습니다. 그러나 변경 사항을 적용하려면 $container-max-widths 변수도 수정해야 합니다.

작업 예
xl 중단점을 재정의하고 1280px로 설정하려면, 다음은 Sass의 실제 예제입니다:

// theme.scss
// Override default BT variables
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px, // Custom xl breakpoint
  xxl: 1900px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px, // Custom max-width for xl breakpoint
  xxl: 1610px
);

// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...

이 예에서는 사용자 정의 1280px 중단점을 포함하도록 Bootstrap의 중단점을 성공적으로 확장했으며 이에 따라 컨테이너의 최대 너비도 조정했습니다.