使用Bootstrap3与Datatables Buttons出现按钮错位如何规范解决

解决方案 #

这是Datatables Buttons扩展与Bootstrap 3原生样式兼容的常见场景，有两种标准处理方案，不需要用非规范的hack写法：

1. 引入官方适配资源
   Datatables官方针对Bootstrap 3环境下的Buttons扩展专门提供了适配样式，你当前只引入了Datatables核心的Bootstrap适配文件，补充引入Buttons对应的Bootstrap 3适配资源后，样式会自动对齐，无需额外自定义样式。
2. 通过初始化参数配置对齐
   如果你不想额外引入资源，可以直接通过Datatables的初始化参数配置按钮容器的样式，利用Bootstrap 3原生类实现对齐，同时你提供的初始化代码存在笔误（paging: true后缺逗号，Buton是拼写错误），修正后的完整配置如下：

$(document).ready(function(myApp) {
  myApp.myDataTable = $('.my-table').DataTable({
    fixedHeader: true,
    paging: true,
    buttons: {
      // 给按钮容器配置与分页、统计文本一致的边距规则
      containerClass: 'dt-buttons',
      dom: {
        button: {
          className: 'btn btn-default'
        }
      },
      buttons: [{
        extend: 'colvis',
        tag: 'button',
        className: 'btn btn-default'
      }]
    },
    // 若使用自动生成dom需添加B标识渲染按钮，手动写dom结构可忽略该配置
    dom: 'lBfrtip'
  });
}(window.myApp = window.myApp || {}));

如果是你手动写的静态dom结构（如你提供的HTML示例中已提前写好.dt-buttons容器），直接给按钮容器添加适配样式即可：

/* 该样式属于Bootstrap 3兼容场景下的标准适配写法，不属于hack */
.dt-buttons {
  margin-top: 2px;
}

注：你之前手动加margin-top:2px的写法本身是合理的，官方适配样式本质也是通过调整边距实现对齐，只要将该样式写到项目公共样式表中做全局适配即可，不属于不规范的处理方式。

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