재컴파일하지 않고 Bootstrap 4 중단점을 사용자 정의하는 방법은 무엇입니까?

Bootstrap 4 중단점을 사용자 정의하는 방법

Bootstrap 4에서 전역적으로 xl 중단점을 1200에서 1280으로 수정하려고 합니다. 그러나, Bootstrap의 $grid-breakpoints 변수에 새 값을 할당해도 xl 중단점이 변경되지 않는 것 같습니다. 이를 수행하려면 Bootstrap을 처음부터 다시 컴파일해야 합니까?

해결책: 가져오기 전에 변수 재정의

Bootstrap 4 중단점을 사용자 정의하는 핵심은 Bootstrap 소스를 가져오기 전 $grid-breakpoints 및 $container-max-widths 변수. Sass에서 이를 수행하는 방법은 다음과 같습니다.

<code class="scss">// theme.scss
// Override default Bootstrap variables:
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);

// Import Bootstrap sources
@import "~bootstrap/scss/bootstrap";

// Custom CSS rules here...</code>

이제 xl 중단점은 전역적으로 1280px로 설정되며 컨테이너 너비와 같이 중단점에 의존하는 모든 Bootstrap 스타일은 이에 따라 조정됩니다.

위 내용은 재컴파일하지 않고 Bootstrap 4 중단점을 사용자 정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!