能否在同一HTML文件不同Div中混用Bootstrap3与Bootstrap4？附代码求助

嘿，这个需求是可以实现的，但有个关键前提：绝对不能直接同时引入两个版本的Bootstrap库！

为什么呢？因为Bootstrap 3和4共享太多同名的CSS类（比如.container、.row、.btn）和JS组件，直接引入的话，后加载的样式会覆盖先加载的，JS也会因为全局变量冲突而罢工，最后两个区块的样式和交互全乱套。

下面是两种靠谱的实现方案，以及针对你代码的修复建议：

方案1：CSS命名空间隔离（适合仅需样式的场景） #

这个方法的核心是给两个版本的Bootstrap CSS加上专属的“命名空间”，让它们只作用于各自的div容器，互不干扰。

具体步骤： #

• 处理Bootstrap CSS文件
  • 针对Bootstrap 3：用PostCSS工具或者在线的CSS嵌套转换工具，把所有Bootstrap 3的CSS规则都嵌套到.bootstrap3选择器下。举个例子，原来的.btn { ... }会变成.bootstrap3 .btn { ... }。处理完的文件可以叫bootstrap3-namespaced.css。
  • 针对Bootstrap 4：同理，把所有规则嵌套到.bootstrap4选择器下，生成bootstrap4-namespaced.css。
• 修改你的HTML代码，引入处理好的命名空间CSS并对应使用容器类

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bootstrap3 & bootstrap4 in same html file</title>
    <!-- 引入处理好的命名空间版Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap3-namespaced.css">
    <link rel="stylesheet" href="bootstrap4-namespaced.css">
</head>
<body>
    <div class="bootstrap3">
        <!-- 这里放心用Bootstrap3的类就行 -->
        <button class="btn btn-success">Bootstrap 3 按钮</button>
        <div class="alert alert-info mt-2">Bootstrap 3 提示框</div>
    </div>

    <div class="bootstrap4 mt-4">
        <!-- 这里正常用Bootstrap4的类 -->
        <button class="btn btn-primary">Bootstrap 4 按钮</button>
        <div class="alert alert-warning mt-2">Bootstrap 4 提示框</div>
    </div>
</body>
</html>

注意事项： #

• 这个方法只能解决CSS冲突，如果你的区块需要Bootstrap的JS组件（比如模态框、下拉菜单），JS部分的冲突还是会存在——毕竟两个版本的Bootstrap JS会抢全局变量（比如$.fn.modal）。这种情况更推荐下面的方案。

方案2：iframe隔离（适合需要完整Bootstrap功能的场景） #

iframe会创建一个独立的浏览器上下文，相当于在页面里嵌了个小浏览器，两个版本的Bootstrap可以完全隔离开，连JS都不会互相干扰，堪称“终极解决方案”。

具体步骤： #

• 单独写Bootstrap3的页面（比如命名为bootstrap3-content.html），在这个页面里正常引入Bootstrap3的CSS和JS，编写对应的内容
• 单独写Bootstrap4的页面（可选，如果主页面本身用Bootstrap4，也可以直接写在主页面里），同理引入Bootstrap4的资源并编写内容
• 修改主页面代码，用iframe分别嵌入两个独立页面

Bootstrap3独立页面示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 正常引入Bootstrap3的CSS和JS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 这里写你需要Bootstrap3的内容，比如带模态框的按钮 -->
    <button class="btn btn-success" data-toggle="modal" data-target="#myModal">Bootstrap3 模态框</button>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Bootstrap3 弹窗</h4>
                </div>
                <div class="modal-body">这是Bootstrap3的模态框，功能完全正常~</div>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap4独立页面示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 正常引入Bootstrap4的CSS和JS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <!-- 这里写你需要Bootstrap4的内容 -->
    <button class="btn btn-primary" data-toggle="modal" data-target="#bs4Modal">Bootstrap4 模态框</button>
    <div class="modal fade" id="bs4Modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Bootstrap4 弹窗</h5>
                </div>
                <div class="modal-body">这是Bootstrap4的模态框，和3版本完全不冲突~</div>
            </div>
        </div>
    </div>
</body>
</html>

修改后的主页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bootstrap3 & bootstrap4 in same html file</title>
    <!-- 如果主页面需要Bootstrap4，也可以直接在这里引入 -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> -->
</head>
<body>
    <div class="bootstrap3 mb-4">
        <!-- 用iframe嵌入Bootstrap3的页面 -->
        <iframe src="bootstrap3-content.html" frameborder="0" width="100%" height="200"></iframe>
    </div>

    <div class="bootstrap4">
        <!-- 可以直接写Bootstrap4内容，或者用iframe引入 -->
        <iframe src="bootstrap4-content.html" frameborder="0" width="100%" height="200"></iframe>
    </div>
</body>
</html>

优势： #

• 完全隔离CSS和JS，两个版本的Bootstrap功能都能正常使用
• 维护起来更简单——每个版本的代码独立编写，不需要修改原始的Bootstrap文件

你原始代码的问题 #

你的代码里没有引入任何Bootstrap的CSS或JS文件，所以自然无法生效；而且就算你直接引入两个版本，也会立刻出现样式覆盖和JS冲突的问题，所以必须按照上面的方案做隔离处理才行。

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