使用 React Bootstrap 覆盖引导程序 4 时无法使 @media 查询工作

Posted 2023-03-21

【中文标题】使用 React Bootstrap 覆盖引导程序 4 时无法使 @media 查询工作

【英文标题】：Can't get @media queries to work when overriding bootstrap 4 using React Bootstrap

【发布时间】：2021-11-28 18:07:54

【问题描述】：

基本上，使用引导程序 4，我正在尝试使用引导程序类“自定义选择”并覆盖一些引导程序元素以供我自己使用。这是我使用的html和scss。很简单的东西。

<select className="custom-select" id='sortingSelect' onChange=(e) => setSortingOption(e.target.value)>
                    <option defaultValue value ="0">Random</option> 
                    <option value="1">A - Z</option>
                    <option value="2">Z - A</option>
                </select>


.custom-select#sortingSelect
    width: 5% !important;
    float: right !important;
    margin-right:5% !important;

当我把它放在我正在处理的那个页面的“module.scss”中时，它直接不起作用，所以我最终不得不把它放到我的 custom.scss 中，全局覆盖东西。即使使用 !important 标记，它仍然无法在我的 module.scss 中使用，但它可以在我的 custom.scss 中使用。问题解决了，嗯，有点。

因为！我希望它也能够随屏幕大小而变化，毕竟这是引导程序。所以我将以下内容放入我的 custom.scss

@media (max-width: 768px)  
.custom-select#sortingSelect
    float: none !important;
    display: block !important;
    margin: 0 auto !important;

由于某种原因，它甚至似乎根本无法识别此输入：/

custom.scss 文件中是否根本不允许媒体查询？如果是这样的话，我只是骨头吗？还是我只是把这一切都错了？这可能是特异性的一些问题，但我怎么能比我已经得到的更具体？

如果我需要提供更多上下文，请告诉我！

还有！我读到我需要在我的 html 中包含以下代码

<meta content="width=device-width, initial-scale=1" name="viewport" />

但是，我使用的是 React，所以我将它包含在从我的 Layout 组件返回的 html 中，该组件呈现了其他所有内容，仍然没有运气，无论如何这作为问题没有意义，因为媒体查询已经工作之前在同一个文件中，只是没有覆盖引导程序。到目前为止，覆盖引导程序的东西似乎总是比我需要的要困难得多。

编辑：我尝试使用内置断点的引导程序，但也失败了

【参考方案1】：

为什么在 CSS 文件中同时使用类和 ID。

对 CSS 使用 className 或 Id。

---

点赞：

.custom-select
    width: 5% !important;
    float: right !important;
    margin-right:5% !important;

或

#sortingSelect
    Height: 5% !important;
    float: left !important;
    margin-left: 5% !important;