如何在bootstrap4中添加自定义断点以及如何在scss中使用响应式断点mixins [英] How to add custom breakpoints in bootstrap4 and how to use responsive breakpoint mixins in scss
问题描述
我正在开发一个Angular 5应用程序,它需要是一个响应式应用程序.
我面临的问题是使其在1366X768
和1920X1080
分辨率下具有响应速度,而字体大小不同.
问题1: 我在style.scss中覆盖了如下的断点:
$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
);
我添加了xxl
作为新的断点.现在,当我将col-xxl-*
类添加到我的任何元素中时,该元素将像col-12
一样使用全角宽度.
请参考下图:
对于带有红色边框的容器,我给了col-xxl-3
类;但是它仍然具有全宽.为什么其与col-*-3
相关的共振网格类别未得到应用.
我认为它应该生成如下的CSS:
.col-xxl-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
但事实并非如此.我做错什么了吗?
问题2
从该引导响应断点,我们可以使用mixins针对不同的分辨率.因此,在组件级scss中,我使用了以下这些mixins:
@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;
}
}
但是当我像下面这样使用它时:
span.work_catalog {
@include media-breakpoint-up(xxl) {
border:1px solid red;
}
}
这仍然适用于1200px以上的分辨率; 我假设以上css应该仅适用于1900px以上,因为我已在style.scss中添加了自定义网格断点. 我在这里想念什么吗?
您可以像这样添加新的xxl
断点.确保在设置自定义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";
演示: https://www.codeply.com/go/jus43PxWAU >
然后将生成相应的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 2
From 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/jus43PxWAU
Then 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!