Bootstrap 5媒体查询与响应类不匹配

发布于 2025-01-10 03:27:47 字数 1156 浏览 0 评论 0原文

我使用 bootstrap 5 来实现这样的简单布局

.section1 {
        background: red;
    }

@media all and (max-width: 575px) {

    .section1 {
        background: green !important;
    }

}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

<div class="container1 d-flex d-sm-block">
 
    <div class="text-white section1">
        Section 1
    </div>

    <div class="bg-light text-dark section2">
        Section 2
    </div>

</div>

<div>

当缩小屏幕尺寸时，我希望 section1 的背景变为绿色，同时 container1 的 display 属性更改为显示 flex >

目前有 3 个不同的状态..

我哪里出错了？

原文

I am using bootstrap 5 for a simple layout like this

.section1 {
        background: red;
    }

@media all and (max-width: 575px) {

    .section1 {
        background: green !important;
    }

}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

<div class="container1 d-flex d-sm-block">
 
    <div class="text-white section1">
        Section 1
    </div>

    <div class="bg-light text-dark section2">
        Section 2
    </div>

</div>

<div>

When making the screensize smaller, I want the background of section1 to change to green at the same time that the display property of container1 changes to display flex

Currently there are 3 different states..

Where am I going wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

末が日狂欢 2025-01-17 03:27:47

您应该将“container1”类更改为：

d-flex d-sm-块

至

d-sm-flex d 型块

并将媒体最大宽度更改为 max-width: 1024px

.section1 {
        background: red;
    }

@media all and (max-width: 1024px) {

    .section1 {
        background: green !important;
    }

}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

<div class="container1 d-sm-flex d-block">
 
    <div class="text-white section1">
        Section 1
    </div>

    <div class="bg-light text-dark section2">
        Section 2
    </div>

</div>

<div>

you should change "container1" class from :

d-flex d-sm-block

d-sm-flex d-block

and change media max width to max-width: 1024px

.section1 {
        background: red;
    }

@media all and (max-width: 1024px) {

    .section1 {
        background: green !important;
    }

}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

<div class="container1 d-sm-flex d-block">
 
    <div class="text-white section1">
        Section 1
    </div>

    <div class="bg-light text-dark section2">
        Section 2
    </div>

</div>

<div>

回复收藏 0 原文

~没有更多了~