如何在bootstrap4中添加自定义断点以及如何在scss中使用响应式断点mixins

然后将生成相应的xxl-*类... @media (min-width: 1900px) { .col-xxl-3 { flex: 0 0 25%; max-width: 25%; }}对于自定义mixin类，请在@import引导程序之后定义那些类... @import "bootstrap";span.work_catalog { @include media-breakpoint-up(xxl) { border:1px solid red; }}演示: https://www.codeply.com/go/jus43PxWAU (注意该演示程序将xxl断点设置为1366px)，因此，当屏幕宽于xxl时，.work_catalog具有预期的红色边框.I am working on an angular 5 application which needs to be a responsive app.I am facing problem to make it reponsive in 1366X768 and 1920X1080 resolutions where in font sizes are different.Problem 1: I have overidden breakpoints in my style.scss as follow : $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl:1900px //this is custom breakpoint; after compiling bootstrap does generates col-xxl-* classes);I have added xxl as new breakpoint. Now when I add col-xxl-* class to any of my element, that element takes full width jusy like what col-12 does.Refer image below :For container having border red,I have given col-xxl-3 class; however it still having full width. Why its resonsive grid classes related to col-*-3 not getting applied.I think it should generate css like below:.col-xxl-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;} But it doesn't. Am I doing something wrong ?Problem 2From this bootstrap responsive breakpoints , we can use mixins for targeting different resolutions. So in component level scss I have used these mixins as below :@import '~bootstrap/scss/_functions.scss';@import '~bootstrap/scss/_variables.scss';@import '~bootstrap/scss/_mixins.scss';span.work_catalog { @include media-breakpoint-up(xl) { //this will target all above 1200 px as per bootstrap documentation; so this works as u see red border in above image border:1px solid red; }}but when I used it like below : span.work_catalog { @include media-breakpoint-up(xxl) { border:1px solid red; } }this still gets applied for resolution more than 1200px;What I assume that above css should only gets applied for above 1900px as I have added custom grid breakpoint in my style.scss.Am I missing something here? 解决方案 You can add a new xxl breakpoint like this. Make sure you @import bootstrap after setting the custom grid-breakpoints...@import "bootstrap/functions";@import "bootstrap/variables";$grid-breakpoints: ( xs: 0, sm: 567px, md: 768px, lg: 992px, xl: 1200px, xxl: 1900px);$container-max-widths: ( sm: 567px, md: 768px, lg: 992px, xl: 1200px, xxl: 1900px); @import "bootstrap";Demo: https://www.codeply.com/go/jus43PxWAUThen the appropriate xxl-* classes will be generated...@media (min-width: 1900px) { .col-xxl-3 { flex: 0 0 25%; max-width: 25%; }}For the custom mixin classes, define those after you @import bootstrap...@import "bootstrap";span.work_catalog { @include media-breakpoint-up(xxl) { border:1px solid red; }}Demo: https://www.codeply.com/go/jus43PxWAU (notice the demo sets the xxl breakpoint as 1366px) so when the screen is wider than xxl, .work_catalog has the expected red border. 这篇关于如何在bootstrap4中添加自定义断点以及如何在scss中使用响应式断点mixins的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！