媒体查询在 Bootstrap 断点上不起作用答案

【问题标题】：Media query not workng on Bootstrap breakpoint媒体查询在 Bootstrap 断点上不起作用
【发布时间】：2021-03-21 16:05:49
【问题描述】：

我正在使用 Bootstrap 4 并尝试使用以下代码：

已编辑

@media only screen and (max-width: 575px) { 
    .marbling {
        background: none;
        border-left: 0 solid;
        }
    h2.podstrona-tytul {
        margin-top: 180px;  
        text-align: center;
        }
    }

但我看到的效果不是 575 像素而是 574 像素。如果 max-width: 576px 更改在 576px 中可见，这也很糟糕。有什么方法可以解决它？

【问题讨论】：

能否使用您的代码设置一个 sn-p，显示它在 575 处不工作但在 574 处工作？您的 col-sm-1.jasne-tlo 样式在我创建的测试页面上为我切换了 575 和 576 的显示样式。
这是大型 wordpress 页面的一小部分，我不确定如何将其缩减为 sn-p。但你是对的，.col-sm-1 部分正在工作（我将从问题中删除它以免造成混淆），但其余部分没有。

标签： bootstrap-4 media-queries

【解决方案1】：

如果不查看给您带来问题的代码，很难理解发生了什么，但您可能需要考虑的一件事是，与其使用与 Bootstrap 的工作方式相反的 max-width: 575px，不如尝试使用 @ 设置您的样式987654322@，类似这样的：

.marbling {
    background: none;
    border: 0.25rem solid red;
    border-left: 0;
}

.podstrona-tytul {
    margin-top: 180px;  
    text-align: center;
}

@media only screen and (min-width:576px) {
    .marbling {
        background-image: url("https://i.imgur.com/dWxZXGI.png");
        background-repeat: repeat;
        border-left: 0.25rem solid red;
    }

    .podstrona-tytul {
        margin-top: 16px;
        text-align: left;
    }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="container-fluid">
    <div class="row">    
        <div class="col-6 marbling">
            <h2 class="podstrona-tytul">Media query not workng on Bootstrap breakpoint</h2>
        </div>
    </div>
</div>

以这种方式编码，宽度为 575px 或更小，h2 标签的上边距为 180px，文本居中，没有背景图像，也没有左边框。宽度为 576px 或更大时，h2 标签的上边距为 16px，文本左对齐，并且有一个带左边框的背景图片。

【讨论】：