Bootstrap 4介质断点在上下之间是什么?

问题描述 投票:0回答:2

有人可以解释一下Bootstrap 4中的media-breakpoint-upmedia-breakpoint-downmedia-breakpoint-betweenmedia-breakpoint-only吗?

sass bootstrap-4 breakpoints
2个回答
0
投票

这些与CSS媒体查询有关。当页面大小从台式机,平板电脑更改为移动设备尺寸时,它们用于设置断点。

这里是所有细节的绝佳资源:https://getbootstrap.com/docs/4.3/layout/overview/


0
投票

虽然所有Bootstrap 4 breakpoint标签在某些方面都与CSS媒体查询有关,但是您在问题中引用的标签与SASS mixins有关

引自Bootstrap 4:“自从我们使用Sass编写源CSS以来,所有媒体查询都可以通过Sass mixins获得:”

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

关于各种标签-down -betweenonly的继续说明,可以在Bootstrap 4网站上找到>>> https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

© www.soinside.com 2019 - 2024. All rights reserved.