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

Question

我是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-warning，因为我的问题是 - 是否可以随着屏幕宽度的变化更改背景颜色 - 因为我们能够使用列宽本身吗？

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

Answer 1

Bootstrap不提供任何html类来执行您所要求的操作，您必须使用ssc-hrep3提到的媒体查询。

但是由于你使用的是bootstrap 4，你可以使用Sass mixins来创建媒体查询： Using media breakpoints in Bootstrap 4-alpha

使用上面链接中的答案示例，您可以这样做：

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