媒体查询更改 Div 背景颜色但不更改其宽度？

Posted 2023-03-06

【中文标题】媒体查询更改 Div 背景颜色但不更改其宽度？

【英文标题】：Media query changing Div Background color but not its width?

【发布时间】：2020-11-03 13:24:35

【问题描述】：

我已经搜索并尝试了解决方案，但对我不起作用。

我的 div 是，

 <div id="test" class="col-4">
            <a class="nav-link py-0" href="~/MyDevices/Index">
                <img src="~/Images/logo.png"  />
                <strong class="h4 text-white">
                    Title is here for Application
                </strong>
                <span class="sr-only">(current)</span>
            </a>
        </div>

标题在小型设备上出现故障，但我手动将其 div 类更改为“col-6”，它工作正常。 我正在使用媒体查询将 col-4 更改为 col-6 它不起作用，但我可以更改 div 背景颜色。

我的媒体查询是，

@media (min-width: 768px) 
    #test  
        width: 50% !important;
        background-color: aliceblue;
    

我的媒体查询在 bootstrap.css 中

如果我在#test 之后在媒体查询中使用 .col，则它不会将此媒体查询称为无背景颜色。

如何改变div的宽度？

希望得到您的回应

【参考方案1】：

Bootstrap 4 使用 flex，所以如果你使用它，你应该像这样将宽度更改为 flex

@media (min-width: 768px) 
    #test  
        flex: 50% !important;
        max-width: 50% !important;
        background-color: aliceblue;
    

但是您可以通过将 col-md-6 添加到元素来使用引导程序

 <div id="test" class="col-4 col-md-6">

【讨论】：

我正在使用 Bootstrap 3，我是否也应该尝试 class="col-4 col-md-6" ？

是的，bootstrap 3 也一样

w3schools.com/bootstrap/bootstrap_grid_system.asp

太好了，没问题很高兴我能帮上忙！ :)

如果你不介意你能告诉这个 col-md-6 在做什么吗？