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

Question

为了使我的网站响应，我打算使用媒体查询来改变文本大小等等。问题是我使用bootstrap来设置文本的大小。我想知道是否有一种方法可以在我的CSS文件中使用来自bootstrap的类。

例如，类似于：

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

我最初以为我可以使用@import规则来完成这个任务，但是它没有起作用。

我该怎么做呢？

Answer 1

我要做的是，不要依赖引导程序，我只需要进行手动媒体查询，如下所示

<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;
  }
}

引导程序在这里列出了大小：

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