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

Question

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

我的 div 是，

 <div id="test" class="col-4">
            <a class="nav-link py-0" href="~/MyDevices/Index">
                <img src="~/Images/logo.png" width="75" />
                <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的宽度？

希望得到您的回应

Answer 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">