Buttons 2.4.1独立包与构建器包CSS不一致致布局异常求助

未引入Buttons 2.4.1独立版CSS时，页面布局出现异常（截图：布局异常截图）。使用DataTables下载构建器生成了整合CSS链接：

<link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-1.13.5/af-2.6.0/b-2.4.1/b-colvis-2.4.1/b-html5-2.4.1/b-print-2.4.1/cr-1.7.0/date-1.5.1/fc-4.3.0/fh-3.4.0/kt-2.10.0/r-2.5.0/rg-1.4.0/rr-1.4.1/sc-2.2.0/sb-1.5.0/sp-2.2.0/sl-1.7.0/sr-1.3.0/datatables.min.css" rel="stylesheet">

无论在上述整合CSS链接之前还是之后引入独立版CSS，布局均可恢复正常（截图：布局正常截图），collectionLayout: 'two-column'属性也能正常显示。

疑问：为何必须单独引入Buttons CSS，构建器生成的版本无法正常工作？

核心原因 #

你通过构建器生成的是Bootstrap 5（bs5）环境的整合CSS包，其中包含的Buttons样式是适配Bootstrap框架的buttons.bootstrap5.min.css，而非DataTables原生的buttons.dataTables.min.css。

两者的样式规则差异在于：

• Bootstrap版Buttons样式为贴合Bootstrap组件设计，省略了原生DataTables Buttons里的部分布局规则（比如collectionLayout依赖的多列布局样式）。
• 你使用的collectionLayout: 'two-column'是原生DataTables Buttons的属性，需要原生CSS里的.dt-button-collection.two-column等规则支持，Bootstrap版整合包中没有这些规则，因此出现布局异常。

解决方向 #

1. 切换构建器环境：
   若不需要Bootstrap样式，重新在DataTables构建器中选择「原生DataTables」环境而非bs5，生成的整合包会包含原生Buttons CSS，无需单独引入。

2. 适配Bootstrap样式：
   若要保留Bootstrap环境，避免使用collectionLayout这类依赖原生CSS的属性，改用Bootstrap的下拉菜单布局类（比如dropdown-menu-columns）实现多列效果，无需额外引入原生Buttons CSS。

3. 保留单独引入（临时方案）：
   继续单独引入原生Buttons CSS，但需注意可能出现的样式冲突（比如按钮混合Bootstrap和原生风格），需针对性调整CSS优先级。

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