Dash引入本地Bootstrap样式表后行为异常问题咨询

问题根因 #

你下载的是Bootstrap 5版本的flatly主题，两个异常都和版本特性、依赖引入不完整有关：

1. CardDecks垂直排列：Bootstrap 5已经正式废弃了card-deck组件，原Bootstrap 4版本的card-deck相关样式在Bootstrap 5的样式表中不存在，自然无法实现水平排列效果。
2. Checkbox menus显示异常：Bootstrap的下拉菜单、表单交互组件的样式渲染，依赖配套的JS文件和Popper.js实现动态类名绑定、交互逻辑触发，仅引入CSS文件会导致这类需要动态适配的组件显示异常。

解决步骤 #

• 统一Bootstrap版本适配
  如果你现有业务代码沿用的是Bootstrap 4的写法，直接更换为Bootstrap 4版本的flatly主题即可；如果要继续使用Bootstrap 5，把原有card-deck的代码替换为Grid布局实现等效效果，示例写法如下：

  <div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
      <div class="card h-100">...</div>
    </div>
    <!-- 其余卡片结构同上 -->
  </div>
  

• 补全依赖引入
  引入和你下载的CSS版本完全一致的Bootstrap JS、Popper.js文件，避免版本不兼容问题，引入后再测试Checkbox menus的显示效果即可。
• 校验自定义修改内容
  可以把你修改后的样式表和原始未修改的flatly主题CSS做diff对比，确认是否有误删表单、卡片相关样式规则的情况。

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