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

Posted

技术标签:

【中文标题】Bootstrap:如何为每个屏幕宽度指定不同的背景颜色?【英文标题】:Bootstrap: How to specify different background colours per screen width? 【发布时间】:2018-01-29 23:14:19 【问题描述】:

我是 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,因为我的问题是 - 是否可以随着屏幕宽度的变化而改变背景颜色 - 正如我们能够自己使用列宽一样?

例如大屏幕 - bg-warning、Medium、bg-success 等

【问题讨论】:

我认为 Bootstrap 没有开箱即用的功能,但您肯定可以使用 javascript 来实现。 JS是可以用的东西吗? 使用media queries。您需要编写自己的查询。这不是 Bootstrap 的官方功能。但从好的方面来说:这很容易;) 【参考方案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;
   

【讨论】:

以上是关于Bootstrap:如何为每个屏幕宽度指定不同的背景颜色?的主要内容,如果未能解决你的问题,请参考以下文章

如何为 Blazor 服务器应用设置显示宽度?

如何为 R Shiny 中的列设置小数宽度?

如何为android中每个不同的屏幕尺寸定义dimens.xml?

如何为 iPhone 6/7 自定义边到边图像指定尺寸?

如何为等间距按钮添加情节提要约束

如何为 Bootstrap 模式窗口指定主要和次要操作?