Bootstrap 关于覆盖样式的问题入门答案

【问题标题】：Getting started with Bootstrap question about overriding stylesBootstrap 关于覆盖样式的问题入门
【发布时间】：2019-08-22 21:28:09
【问题描述】：

在自定义外观和感觉时，如何确切地知道所有需要用引导样式覆盖的内容？

是否有技巧可以找出我需要在哪里设置样式以使其优先于引导样式？

例如，我已经花了两天时间让表单字段看起来像客户想要的那样。当包裹在表单组行和表单控制嵌套层中时，引导程序的默认值带有一个带圆边的高字段。我创建了自己的类，将填充和边距的所有内容都设置为 0。我还将高度设置为 18px。什么都没有被捡起。

我之前的外观和感觉几乎完美，但我没有使用任何引导程序，只是 html 和 css。首席开发人员说我们需要使用引导样式，只需调整需要调整的内容以适应外观和感觉。 嗯，说起来容易做起来难。

我怀念设计师指定外观和感觉的日子，我们只是编码样式并完成它。这种库使用 80% 的解决方案和 80% 之上的 100% 努力似乎不是一个好方法，除非它是为了最大限度地提高客户的支出。

【问题讨论】：

您是否阅读过主题部分：getbootstrap.com/docs/4.3/getting-started/theming？您可以覆盖引导变量或在 custom.scss 中定义新变量。您甚至可以通过导入其他 scss 文件来在那里引入新类。
尝试在 bootstrap.css 文件中搜索您正在使用的类的属性，然后用 !important 覆盖它？
（正如@jakubMuda 在他的回答中所建议的那样）您只需要使用覆盖创建自己的 css 文件并将其放在调用 bootstrap.css 之后...
真的不喜欢指向那里，但是你试过这个吗？ w3schools.com/bootstrap4/bootstrap_forms_custom.asp
@A.Meshu 感谢链接。我整天都把它作为我的主要参考。刚刚在这里与另一个人交谈，他们建议尝试使用 !important 标签，看看是否可以解决问题。我今天出发已经迟到了 1/2，所以我得走了。希望早上一切都会好起来的。感谢您的宝贵时间。

【解决方案1】：

使用您自己的文件覆盖样式。

不要更新 Bootstrap SCSS 文件以满足您的需要。这可能会导致许多无法预料的问题。假设您要共享或更新到新的引导程序版本。合并文件和/或重写您的工作会很麻烦。

'如果您直接对默认的 bootstrap.css 样式表进行更改，那么维护和跟踪更改将变得非常困难。'

【讨论】：

【解决方案2】：

如果您手动将其导入项目，请不要编辑实际的引导文件。

只需制作自己的样式表，并确保在引导导入后将其导入。

【讨论】：

【解决方案3】：

有两种方法。

1) 编辑 Bootstrap SCSS 以满足您的需求。通过这种方式，您可以通过生成自定义 CSS 来快速自定义它，而不仅仅是覆盖它。这可能是最简单的方法。

2) 使用自定义样式覆盖 CSS。如果您知道 Bootstrap 以及每个元素的样式，这很容易。只需打开Boostrap CSS 找到您需要的内容并覆盖它。这可能很棘手，因为有时 Bootstrap 使用!important。最后一件事 - 将 CSS 放在 Bootstrap 之后！

【讨论】：

只修改项目的 bootstrap.css 文件是否正常？
当然。最简单和最快的方法是使用 SCSS。您也可以使用 bootstrap-grid.css 或仅使用 bootstrap-reboot.css 并自己编写所有 CSS。做最适合你的事。

【解决方案4】：

在我看来，潜在的问题（或者你可以说一些我不知道的事情）是 Bootstrap 的默认值具有大于 0 的填充、边距和其他设置。所以，我使用 bootstrap 的任何标签我'需要重写以将值设置为 0，以便按照客户的需要进行布局。

通过覆盖，我并不是指更改 Bootstrap 实际的 css 文件，而是在您自己的 css 文件中指定您要覆盖的引导样式。

感谢大家的链接和建议。非常感谢。

【讨论】：