Question

有人可以向我解释Bootstrap 4中的media-breakpoint-up，media-breakpoint-down，media-breakpoint-between和media-breakpoint-only吗？

Answer 1

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

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

Answer 2

虽然所有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;
  }
}

有关Bootstrap 4网站的各种标签-down -between和only的继续说明，请参见>>> https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

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

2 个答案: