Question

我正在将angular7应用与bootstrap 4.2.1一起使用。引导程序没有断点，但是我只需要3个断点。所以我改变了3个断点：

@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/mixins/_breakpoints';

$grid-breakpoints: (
    sm: 320px,
    md: 767px,
    lg: 1024px
);

$container-min-widths: (
  sm: 320px,
  md: 768px,
  lg: 1024px
);

@import "~bootstrap/scss/bootstrap";

@include media-breakpoint-up(lg) {
    body{
        background:green;
    }
}

@include media-breakpoint-up(md) {
    body{
        background:yellow;
    }
}

现在我的应用只有3个断点和min的宽度。当我为md编写类属性时，它也适用于lg。这是怎么了如何自定义3个断点并将属性写入其中？

Answer 1

在https://getbootstrap.com/docs/4.2/layout/overview/#responsive-breakpoints的引导文档中，我发现media-breakpoint-up的意思是min-with不是max-with。

来自文档：

从min-width: 0开始隐藏，然后在sm断点处显示

    .custom-class {
      display: none;
    }

    @include media-breakpoint-up(sm) {
      .custom-class {
        display: block;
      }
    }

我认为您应该使用media-breakpoint-only作为引导程序：

还有针对单个细分受众群的媒体查询和混合插件使用最小和最大断点宽度设置屏幕尺寸。

例如这个

@include media-breakpoint-only(sm) { ... }

表示

@media (min-width: 576px) and (max-width: 767.98px) { ... }

也请检出media-breakpoint-between。

希望我能有所帮助。

跨应用程序的自定义媒体查询

1 个答案: