如何禁用引导但仅低于视口的特定宽度？

Question

我在我的网站上使用引导程序。 在一个特定的页面上，我在 CSS 中有这个烦人的规则：

@media (min-width: 576px)
.col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

在这个页面上，我想从 707px 启用引导，而不是从 576px。 我们想对宽度等于或低于 707px 使用不同的布局，所以我想禁用引导程序。 我在 div 元素中添加了两个类：

<div class="col-sm-4 pakiet-column">

col-sm-4 显然负责引导，网站列将用于进一步的样式

我正在尝试使用此代码禁用引导程序，但它甚至没有出现在检查器中

@media (max-width: 707px) {
.col-sm-4.websites-column {
    flex: initial !important;
    max-width: 100% !important;
    }
}

该文件也位于引导链接下方的 head 部分，因此它应该可以工作。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link href="/wp-content/themes/yazgot/style.css?v=1656686766" rel="stylesheet" />

我想知道我在代码中搞砸了什么。 关于如何禁用引导程序但仅低于视口的特定宽度的任何提示？

Answer 1

使用 Bootstrap，您会发现它创建了各种类来覆盖最常见的响应式断点。 您不应该尝试覆盖这样的类，因为这可能会导致以后出现问题。

如果您编写的 HTML 符合 Bootstraps 媒体类，则可以避免创建任何覆盖类。

<div class="col-12 col-md-4 pakiet-column">

使用.col-12 ，我们说，默认情况下，宽度应该是 100%。 当我们到达我们的中等断点时，改变它，以便我们使用 25% 的宽度。

如果您需要自定义 Bootstrap 的媒体查询，则需要使用 npm 或 yarn 等工具下载原始源代码，并修改 bootstrap 提供的变量，而不是使用 CDN。

您使用 Bootstrap 4 还有一个原因吗？ 版本 5 可用，并且有大量文档可用于自定义代码。