如何在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

@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屋！