Bootstrap CSS 影响所有标题元素答案

【问题标题】：Bootstrap CSS affects all heading elementsBootstrap CSS 影响所有标题元素
【发布时间】：2021-06-09 15:11:43
【问题描述】：

我正在为需要这个的 React 项目使用引导模式：

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
  crossorigin="anonymous"
/>

我已将该链接放在我的 index.html 中，一切都很好，但问题是由于某种原因它影响了我所有的 h1、h2、h3、h4、h5、h6 元素。它为它们提供了不同的大小，并且它们不在任何引导容器之类的内部，如何防止库这样做？

【问题讨论】：

CDN 是服务器，而不是库。您是在问如何划分 CSS？
您使用 BS4 标记了您的问题，但您的 CDN 链接转到 BS5
可能重复（以及其他）：stackoverflow.com/questions/19343043/…

标签： javascript html twitter-bootstrap bootstrap-4

【解决方案1】：

按照设计，HTML 标题元素（以及许多其他元素）不必位于 Bootstrap 容器、行或列中，才能受 Bootstrap 的 CSS 影响。这意味着无论项目如何，所有 h1、h2、h3、h4、h5、h6 元素都将受到 Bootstrap 的 CSS 的影响。您应该根据自己的喜好覆盖默认的 Bootstrap 样式。

【讨论】：

【解决方案2】：

这些实际上在 Bootstrap CSS 文件中。查看unminified CSS files（只需从 URL 中删除 .min），您会看到如下内容：

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}

正如我们所见，h1 等都在 Bootstrap 中进行了全局修改，即使它们不在 bootstrap 容器中。要解决这个问题，您可以进入链接的 CSS 文件并删除 h1 和其他冲突的类样式，或者只提取模态所需的类。您还可以重新编译 Bootstrap 的 CSS 以排除这些内容（请查看 the documentation - 虽然这可能需要更长时间，但如果这对这个项目很重要，这可能是更好的做法）。

祝你好运！

【讨论】：

如果我删除 .min 然后我不能切换模式！我将失去该功能
你不会的，别担心！ .min 具有普通 CSS 文件的所有功能，.min 文件更小。重新检查您的模式实现。（另外，如果您刚刚删除了问题中的中的 .min ，请删除完整性属性 - 您已经更改了文件，因此如果您不删除它，它将阻止文件被加载因为完整性不匹配。）
我现在做到了，切换工作正常，但模式没有弹出，它只是像普通 div 一样切换
如何防止它影响标题？或者如何给标题提供正常的默认大小？
正如我在回答中提到的，最简单的解决方案就是从 CSS 文件中删除影响全局级别标题的样式（就像我在回答的代码块中放入的样式）。只需在文件周围按 ctrl-f 并环顾四周。您必须下载它并将其链接到本地才能执行此操作（因为您当然无法编辑 CDN 服务的内容）。

【解决方案3】：

Bootstrap 为多个 HTML 标签提供了一些基本样式，

为防止您可以覆盖内联 CSS 或使用自己的样式表。

或者您可以在本地下载 Bootstrap 并根据您的要求进行编辑。

【讨论】：