如何在 bootstrap.min.css 文件中应用更改

Posted 2023-03-06

【中文标题】如何在 bootstrap.min.css 文件中应用更改

【英文标题】：How to apply changes in bootstrap.min.css file

【发布时间】：2021-08-24 06:41:00

【问题描述】：

我正在构建一个 WordPress 网站，我正在使用 bootswatch 主题。这让我现在发疯了，我想做的是将我的导航栏汉堡菜单设置为在1100px 上显示，而不是在992px 上显示，因为它是在bootstrap.min.css 文件中设置的。疯狂的部分是，当我在样式编辑器（开发控制台）中更改@media 属性时，它可以工作，当我在实际文件中更改它时，它仍然显示992px。就此而言，我在实际文件中所做的任何更改都不会被应用。我尝试清除缓存和所有这些东西，但没有运气。更改简单的属性值时我缺少什么吗？

【问题讨论】：

在您的 OWN css 文件中覆盖样式，而不是在引导文件中（您可以使用!important 覆盖样式或在引导文件之后导入样式表）

或者添加特殊类到你想要的 DOM 并在你的样式表中添加特殊类的样式

好吧，我现在在课堂上从expand-lg 更改为expand-xl，所以它显示在1200px。为什么我不能成功地编辑 .min.css 或 .css 仍然困扰着我。尝试取消缩小然后更改然后再次缩小，所有这些都不起作用：/。问题不在于覆盖值，现在我想知道为什么我不能直接改变它

【参考方案1】：

您可以通过简单地在自己的 CSS 文件中定义样式来覆盖引导样式，方法是为您的容器提供一个额外的自定义类。首先，您必须创建自己的 CSS 文件并在 html 中正确导入该文件，然后为您的容器提供自定义类并在您自己的 CSS 文件中定义宽度。这里有一个小代码 sn-p 可以帮助你：

HTML 代码

<div class='container custom-class'>//your container goes here</div>

CSS 代码

.custom-class
width: 1100px

【参考方案2】：

从 Bootstrap 文档看来，他们在 scss 文件中定义了断点： https://getbootstrap.com/docs/5.0/layout/breakpoints/#between-breakpoints

这是否已被 Bootswatch 中的某些内容所取代？我猜 bootswatch 仍在使用 Bootstrap 中的 scss，您可能还需要在该文件中更改它（_variables.scss）

【参考方案3】：

如果您想更改引导文件，请不要在缩小版本中进行编辑，如果可行，请先在未缩小版本中进行更改。然后缩小您更新的文件并使用该文件，因为不建议对缩小的文件进行更改。

【讨论】：

不行，试过了。结果还是一样

你试过这个@ahmed-ali 解决方案吗？用 !impotent 关键字覆盖你的元素样式？

在问题下方查看我的评论