Laravel项目中能否为不同区块或Div分别使用两套Bootstrap CSS？

当然可以在同一个Laravel项目里让不同区块使用不同版本的Bootstrap（比如一部分用3.x，一部分用4.x），我自己做项目的时候试过两种靠谱的方法，分享给你：

方法一：给其中一个版本添加命名空间前缀（推荐，无冲突） #

这个思路是修改其中一套Bootstrap的样式类名，给所有类加上自定义前缀，这样两套样式就不会互相干扰，适合需要同时用两套完整样式的场景。

具体步骤： #

1. 准备Bootstrap源文件：下载Bootstrap 4.x的SCSS源码包，解压后放到Laravel项目的resources/sass/bs4目录下。
2. 添加前缀变量：在bs4/_variables.scss里新增一个前缀变量：

$prefix: "bs4-"; // 自定义前缀，你也可以改成其他名字

3. 批量修改类选择器：把Bootstrap 4所有SCSS文件里的类选择器都加上这个前缀。比如原来的.container要改成.#{$prefix}container，.row改成.#{$prefix}row。你可以用编辑器的批量替换功能（比如VS Code的全局替换），把所有的.替换成.#{$prefix}，注意避开变量和注释部分。
4. 编译样式：在resources/sass/app.scss里先引入Bootstrap 3的样式，再引入修改后的Bootstrap 4：

// 全局加载Bootstrap 3
@import "bootstrap"; // 假设你已经把Bootstrap3的SCSS放在对应的路径

// 加载带前缀的Bootstrap 4
@import "bs4/bootstrap";

然后运行npm run dev或者npm run prod编译CSS文件。
5. 在模板中使用：需要用Bootstrap 3的区块直接用原生类名，Bootstrap 4的区块用带前缀的类名：

<!-- Bootstrap 3 区块 -->
<div class="container">
  <div class="row">
    <div class="col-md-6">这是用Bootstrap 3渲染的内容</div>
  </div>
</div>

<!-- Bootstrap 4 区块 -->
<div class="bs4-container">
  <div class="bs4-row">
    <div class="bs4-col-md-6">这是用Bootstrap 4渲染的内容</div>
  </div>
</div>

方法二：给Bootstrap样式添加局部作用域 #

如果只是需要在某个局部区块用另一版本的Bootstrap，也可以把该版本的样式包裹在一个父容器类里，只作用于这个容器内部。

具体步骤： #

1. 处理Bootstrap CSS：下载Bootstrap 4的CSS文件，用在线工具或者CSS预处理器，把所有样式代码包裹在一个自定义类选择器里，比如.bs4-wrapper：

.bs4-wrapper {
  /* 这里粘贴Bootstrap 4的全部CSS内容 */
}

把处理后的文件保存为public/css/bootstrap4-scoped.css。
2. 加载样式并使用：在模板里全局加载Bootstrap 3的CSS，然后在需要用Bootstrap 4的区块外层套上.bs4-wrapper：

<!-- 全局加载Bootstrap 3 -->
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
<!-- 加载局部作用域的Bootstrap 4 -->
<link rel="stylesheet" href="{{ asset('css/bootstrap4-scoped.css') }}">

<!-- Bootstrap 3 区块 -->
<div class="container">
  <!-- 内容 -->
</div>

<!-- Bootstrap 4 区块 -->
<div class="bs4-wrapper">
  <!-- 这里的类名直接用Bootstrap 4原生类即可 -->
  <div class="container">
    <div class="row">
      <div class="col-md-6">这是Bootstrap 4的内容</div>
    </div>
  </div>
</div>

注意事项：JavaScript组件冲突 #

如果你的项目需要用到两个版本的Bootstrap JavaScript组件（比如模态框、下拉菜单），直接全局加载会导致冲突，因为它们都依赖jQuery且挂载在全局对象上。解决办法：

• 尽量只使用一个版本的JS组件，避免同时加载两套。
• 如果必须用两套，可以用noConflict()隔离jQuery实例：

<!-- 先加载Bootstrap 3的JS -->
<script src="{{ asset('js/bootstrap3.js') }}"></script>
<script>
  // 保存Bootstrap 3对应的jQuery引用
  var $bs3 = jQuery.noConflict(true);
</script>

<!-- 再加载Bootstrap 4的JS -->
<script src="{{ asset('js/bootstrap4.js') }}"></script>
<script>
  // 保存Bootstrap 4对应的jQuery引用
  var $bs4 = jQuery.noConflict(true);
</script>

之后调用组件时分别使用对应的jQuery对象：

// 调用Bootstrap 3的模态框
$bs3('#bs3-modal').modal();
// 调用Bootstrap 4的模态框
$bs4('#bs4-modal').modal();

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