Bootstrap 4 引导：如何指定每个屏幕宽度的不同背景颜色？

我对Bootstrap的世界还不熟悉，但有一个问题如下

我了解到，可以根据屏幕大小更改列宽，如下所示：

<div class="col-lg-4 col-md-6 col-sm-8 col-xs-12 bg-warning">
<h1>Hello, world!</h1>
This is some text that I wanted to include here.
</div>

你好，世界！
这是我想在这里包括的一些文本。

我的问题是，有没有可能随着屏幕宽度的变化而改变背景颜色，就像我们能够处理列宽一样，我已经在这里加入了bg警告

---

e、 g.大屏幕-bg警告、中屏幕、bg成功等

引导程序不提供html类来执行您要求的操作，您必须使用如ssc-hrep3所述的媒体查询

但由于您使用的是bootstrap 4，因此可以使用Sass mixin创建媒体查询：

使用上面链接中的答案示例，您可以制作如下内容：

.bg-warning {       
   @include media-breakpoint-up(sm) { 
       background:#fff;
   }
   @include media-breakpoint-up(md) { 
       background:#f6f6f6;
   }
   @include media-breakpoint-up(lg) { 
       background:#fafafa;
   }
}

---

我不认为Bootstrap具有这种开箱即用的特性，但您肯定可以通过JavaScript实现这一点。JS是可以使用的东西吗？使用。您需要编写自己的查询。这不是Bootstrap的官方特性。但好的一面是：这很容易；）