bootstrap - 根据屏幕大小应用类答案

【问题标题】：bootstrap - apply class based on screen sizebootstrap - 根据屏幕大小应用类
【发布时间】：2019-05-27 07:07:58
【问题描述】：

我可以在不使用@media only screen 的情况下执行此操作吗？还是this 是最好的方式？

例如我可以用 CSS 写这个吗？：

@include media-breakpoint-up(md) {
  .card {
    transform: translate(0px, -75px);
    z-index: 200;
  }
}

我还想根据屏幕大小隐藏/显示一个 div。

【问题讨论】：

【解决方案1】：

您需要对转换使用媒体查询，但您可以对显示属性使用内置的 Bootstrap 断点。例如。 d-md-none 将隐藏md 大小及以上的元素。

【讨论】：

【解决方案2】：

您可以根据您的媒体屏幕尺寸创建多个 CSS 样式表。然后在您的一个特定屏幕尺寸的 css 样式表中，您可以隐藏您的 div。

您的 html 中的示例链接：

<link rel = "stylesheet" media="screen and (min-width: 480px) and (max-width: 1920px)" href= "styles/desktop.css"/>

然后在 desktop.css 中你可以拥有：

.card { display = none; }

当屏幕尺寸在 480px 和 1920px 之间时，这将隐藏您的 div。

【讨论】：

【解决方案3】：

为了根据屏幕大小显示/隐藏 div，bootstrap 提供了一些类来适应标准 bootstrap 断点，以根据屏幕大小显示/隐藏： https://getbootstrap.com/docs/4.0/utilities/display/

【讨论】：