链接 Bootstrap 4 CDN 后 CSS flexbox 无法正常工作

Question

我正在使用 CSS flexbox 来制作带有 display:flex; 的页面标题 不知何故，当我将 Bootstrap 4 CDN 链接链接到我的 HTML 时，flexbox 的行为不像 flexbox，并且 flexbox 中的不同 div 归结为不同的行。 请帮帮我。谢谢。

Answer 1

很可能您的 css 被 bootstrap 的 css 否决了。由于您使用的是 CDN，因此您无法更改引导 css。

我建议您在标题样式中添加“！important”，看看这是否会覆盖 BS css。

您可以查看使用了哪些样式 bij 在 Chrome 中查看您的页面，按 F12。 选择“元素”选项卡。在左侧选择您的标题，然后检查右侧的样式。它会告诉你使用了哪些样式。

Answer 2

您的自定义 CSS class 现在与 Bootstrap-4 CSS class 冲突。如果您想避免这种冲突，您必须执行以下操作：

1. 首先添加 Bootstrap-4 CDN 然后您的自定义 CSS。它将通过自定义CSS 覆盖引导程序CSS。

示例：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="your-custom.css" />
<!-- Your custom CSS -->

1. 如果上述解决方案不能解决您的问题，请转到您的 html 将引导程序 class 更改为自定义 class。

示例：

<nav class="navbar"></nav>
<!--  -->

以上类由引导程序保留。如果上面的class 与您的.navbar class 冲突，请更改class。

<nav class="my-navbar"></nav>
<!-- OR -->
<nav class="navbar my-navbar"></nav>

1. 如果上述解决方案不起作用，则在CSS 属性之后使用!important。它将通过自定义CSS 覆盖引导程序CSS。

示例：

.navbar{
    display: flex !important;
}

注意：尽量避免使用!important CSS 属性。使用新的class 覆盖引导程序CSS。