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

Question

我正在使用CSS flexbox使我的页面标题显示：flex不知何故，当我将Bootstrap 4 CDN链接链接到我的HTML时，flexbox的行为与flexbox不同，并且flexbox中的不同div可以归结为不同的行。请帮帮我。非常感谢。

Answer 1

您的自定义CSSclass现在与引导程序-4CSSclass冲突。如果你想避免这种冲突，你必须做以下事情：

1. 首先添加引导程序-4CDN，然后添加自定义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 -->

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

示例：

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

以上类由bootstrap保留。如果上述class与您的.navbarclass冲突，请更改该class。

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

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

示例：

.navbar{
display: flex !important;
}

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

Answer 2

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

我建议你加上"！重要"，只是看看这是否会覆盖BS-css。

您可以在Chrome浏览器中查看您的页面，按F12查看使用了哪些样式。选择"元素"选项卡。选择左侧的页眉，然后检查右侧的样式。它将向您显示使用了哪些样式。