Bootstrap - 根据设备屏幕大小调整 Jumbotron 图像背景覆盖率答案

【问题标题】：Bootstrap - Resize Jumbotron Image Background Coverage Based On Device Screen SizeBootstrap - 根据设备屏幕大小调整 Jumbotron 图像背景覆盖率
【发布时间】：2017-07-31 18:24:28
【问题描述】：

我正在使用 Bootstrap jumbotron 来显示列表结果。这个 jumbotron 使用图像作为背景，最初设置为覆盖 50% 的宽度和 100% 的高度。请在下面找到jumbotron的HTML div中实现的样式代码：

style="width:80%;max-width:750px;min-height:220px;
background:url({{ property.properties_pictures.property_image1.url }});
background-size:50% 100%;background-repeat:no-repeat;
list-style-type:none;border:solid;border-width:1px;border-color:#d6d0ca;"

对于屏幕宽度小于 500 像素的设备，我想将背景图像的覆盖范围反转为 100% 的宽度和 50% 的高度。

我尝试使用媒体查询但没有成功：

@media (max-width: @screen-sm-min)
{
.jumbotron
{
    background-size: 100% 50%;;
}
}

如果有人能在这方面提供帮助，那就太好了。

谢谢。

【问题讨论】：

标签： css twitter-bootstrap background-image responsive

【解决方案1】：

您应该使用这种格式的媒体查询--

@media only screen and (max-width:500px){
.jumbotron
{
    background-size: 100% 50%;;
}
}

希望这会有所帮助！

【讨论】：

嗨新手。感谢您的回答。我已经用你的建议测试了我的 CSS，但这并没有做任何改变。你会知道为什么会这样吗？
您在哪里添加自定义 css 文件？一个问题可能是它被引导程序覆盖。始终在引导 css 文件之后添加您的自定义 css，以免 in 被引导覆盖。还有一件事不要添加内联 css，这是一种不好的做法，请将其添加到您的自定义 css 文件中。