我可以使用 Bootstrap class 作为自定义 CSS 规则中的变量吗？

Question

为了使我的网站响应迅速，我打算使用媒体查询来更改文本大小等。问题是我使用 bootstrap 来设置文本的大小。我想知道是否有办法在我的 CSS 文件中使用 bootstrap 中的类。

例如：

.test {
    font-size: display-5; /* display-5 is a bootstrap defined size */
}

我原以为我可以使用 @import 规则来做到这一点，但它不起作用。

我该怎么做？

Answer 1

我会做的，不是依赖bootstrap，而是像下面那样做手动媒体查询

<div>
  <p class="fontSizeClass">Your text here</p>
</div>

css 是

@media screen and (max-width: 600px) {
  .fontSizeClass {
    font-size: 30px;
  }
}

@media screen and (min-width: 601px) {
  .fontSizeClass {
    font-size: 80px;
  }
}

bootstrap 此处列出了尺码：

  sm `min-width > 576;`
  md `min-width > 768;`
  lg `min-width > 992;`
  xl `min-width > 1200`
 xxl `min-width > 1400`

我可以使用 Bootstrap class 作为自定义 CSS 规则中的变量吗？

Can I use a Bootstrap class as a variable in a custom CSS rule?

css

bootstrap-5