Bootstrap与MDBootstrap CDN引入冲突问题及解决方案求助

Hey there! I’ve dealt with this exact conflict between Bootstrap and MDBootstrap before, so I know how annoying it is when your buttons and components break out of nowhere. Let’s get this sorted out quickly:

Key Problem #

MDBootstrap is built on top of Bootstrap—its CSS and JS files already include the full Bootstrap core. When you add a separate Bootstrap CDN alongside it, you’re loading duplicate styles and scripts, which causes priority clashes and broken components.

Step-by-Step Solution #

1. Remove the standalone Bootstrap CDN references #

Get rid of both the Bootstrap CSS link and Bootstrap bundle JS script from your code. MDB has you covered here.

2. Adjust your remaining CDN order #

Here’s the cleaned-up, conflict-free setup you should use:

CSS (in your <head>):

<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
<!-- MDBootstrap CDN (includes Bootstrap 5 core styles) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" />
<!-- FontAwesome CSS (for icon support) -->
<link rel="stylesheet" href="https://kit.fontawesome.com/d455f30832.css" crossorigin="anonymous" />

Scripts (right before closing </body>):

<!-- MDB UI Kit JS (includes Bootstrap 5 bundle internally) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.js"></script>
<!-- FontAwesome JS (only keep if you need interactive icon features) -->
<script src="https://kit.fontawesome.com/d455f30832.js" crossorigin="anonymous"></script>

Extra Tips #

• After updating, clear your browser cache and refresh the page to see the changes take effect.
• If you still have minor style glitches, use your browser’s dev tools (F12) to inspect the problematic elements. You can add custom CSS with more specific selectors to override any lingering conflicts.

P.S. If this fix works for you, I’d be super grateful for an upvote to help boost my account reputation—thank you so much!

内容的提问来源于stack exchange，提问作者KRD_CoDeR_BoY