Bootstrap 4의 그리드 시스템 중단점 사용자 정의

Question

데스크탑에서 태블릿으로, xl에서 LG로 각각 1280개의 중단점이 필요한 디자인의 애플리케이션이 있습니다. 그러나 Bootstrap 자체에는 1200에 xl 중단점이 있습니다.

부팅을 위해 전역적으로 xl 중단점을 변경해야 합니다. 소스에서 Bootstrap 4를 다시 컴파일해야 합니까?

Sass 빌드에서 이것을 설정해 보았습니다:

으아아아

그러나 전역 xl 중단점에는 변화가 없으며 여전히 1200px 너비에서 중단됩니다.

Answer 1

Change $grid-breakpoints 变量就可以正常工作。请记住，您必须导入 custom.scss 中的 /bootstrap 或 bootstrap/variables 그런 다음 @import 부트스트랩 이후. < /em>

예:

으아아아

데모: https://codeply.com/go/MlIRhbJYGj

참조: SASS를 사용하여 Bootstrap 4를 확장/수정(사용자 정의)하는 방법

Answer 2

부트스트랩 4.x 및 5.x

Bootstrap 소스를 가져오기 전에 $grid-breakpoints 和 $container-max-widths 변수를 재정의해야 합니다. 다음은 실제 예시입니다(scss):

으아악