使用dom选项为Bootstrap框架构建布局。

var table = $('#example').DataTable({
    dom: "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-4'l><'col-sm-8'p>>"
});

有关代码和演示，请参见this jsFiddle

编辑：啊，我意识到我不能在评论中回复评论，我希望楼主能看到这一点。
只需添加字符i以获取信息
例如，如果你想让i在l之后，那么如下所示

var table = $('#example').DataTable({
    dom: "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-4'li><'col-sm-8'p>>"
});

否则，您甚至可以让i拥有它自己col-sm，如下所示（注意，我将pagination，p从8减少到4，以便符合bootstrap标准的“row”的12个划分。

var table = $('#example').DataTable({
    dom: "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-4'l><'col-sm-4'i><'col-sm-4'p>>"
});

在bootstrap 4上，我被“语言”覆盖：{“正在处理”：“sLengthMenu”（长度菜单）：“零记录”：“sInfo”：“开始 * 结束 * 总计 * 查看"，“sInfoEmpty”：“sInfoFiltered”（已过滤信息）：“sInfoPostFix”：我不知道你在说什么。“"、”搜索”：“：“，“sUrl”：“"、“o分页”：{第一个：“”，“上一个”：“下一个”：“”、“sLast”：““}

只需通过添加新属性来覆盖Datatable CSS类.dataTables_wrapper .dataTables_length，如下所示。

.dataTables_wrapper .dataTables_length {
    white-space: nowrap;
}

在我的例子中，我尝试在表格的底部实现长度、信息和分页。你可以看到下面的结果。

若要达到这个目的，首先您应该设定DataTable的dom属性。

dom: "<'row'<'col-sm-12'tr>><'row'<'col-sm-3'l><'col-sm-3'i><'col-sm-6'p>>"

然后，根据您的需要，在CSS文件中或在****标记之间放置并自定义以下代码。

div.dataTables_wrapper div.dataTables_info {
    padding-top: 1.7em;
}
div.dataTables_wrapper div.dataTables_length {
    padding-top: 0.3em;
}

这解决了我的问题。但是如果你需要对datatable的其他属性进行样式化，你可以自由地使用下面的选择器。

div.dataTables_wrapper div.dataTables_filter {
    padding-top: 0.8em;
}
div.dataTables_wrapper div.dataTables_paginate {
    padding-top: 0.8em;
}