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，则不会调用该媒体查询没有BG颜色。

如何更改div宽度？

希望您能做出回应

Answer 1

Bootstrap 4使用flex，因此，如果您要使用flex，则应像这样更改width来弯曲

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

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

1 个答案: