媒体查询更改 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>

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

我的媒体查询是，

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

我的媒体查询在里面 bootstrap.css

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

如何更改 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 添加到元素

来使用 bootstrap

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

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

Media query changing Div Background color but not its width?

css

asp.net-mvc

media-queries

twitter-bootstrap

twitter-bootstrap-3