引导升级似乎导致数据表搜索过滤器出现奇怪的定位问题答案

【问题标题】：Bootstrap Upgrade Appears to have cause Odd Positioning issue with Datatables Search Filter引导升级似乎导致数据表搜索过滤器出现奇怪的定位问题
【发布时间】：2016-01-27 07:24:59
【问题描述】：

我正在开发一个 ASP.NET MVC 项目，该项目需要大量的前端 javascript 库，但似乎并非所有这些库都能很好地协同工作。

我的一个队友在一个周末将我们的项目从 Twitter Bootstrap v2.X 升级到 v3.3.5，我们的 DataTables 现在有一个尴尬的问题，即搜索过滤器显示在另一行的左侧，即使我指定的 sDom 清楚地表明它应该显示在第一行并最好向右对齐。

var sDomGrid = '<"row" <l><f><r>>t<"row" <i><p>>';

以前，sDom 是这样的：

var sDomGrid = "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>";

无论哪种情况，DataTable 搜索过滤器都会显示如下：

我推断这很可能是由 Bootstrap 升级引起的，因此我将 JQuery UI 更新到了 1.11.4，它附带了更新的 JQuery 1.11.3，我还将 DataTables 本身更新到了 1.10.9。有趣的是，我的搜索过滤器几乎没有任何变化。事实上，几乎我对 sDom 所做的任何事情似乎都不会改变数据表的标题。

我尝试清除所有缓存，在 Chrome 中检查开发人员控制台中的元素以发现麻烦的 css，javascript 调试以查看是否在某个时候被覆盖，并且几乎用尽了互联网，但没有找到任何有类似问题的人.

是否有其他人遇到过此问题或类似问题，您接下来可以指导我采取哪些建议或故障排除步骤？

【问题讨论】：

你必须更具体，即创建一个重现行为的小提琴。 dom :'<"row" <l><f><r>>t<"row" <i><p>>' 不将搜索框向左对齐，并且 bootstrap 3.3.5 不会移动 dataTables 动态创建的控件。

标签： javascript jquery twitter-bootstrap datatable alignment

【解决方案1】：

Bootstrap 3 需要 dom 选项中的特定字符串，有关详细信息，请参阅 Styling 部分。

DataTables 支持的样式库将覆盖dom 参数的默认值，并将其替换为适合其布局系统的值。例如，Bootstrap 集成利用了 Bootstrap 的网格布局。

样式集成的默认设置是：

引导程序：
"dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
       "<'row'<'col-sm-12'tr>>" +
       "<'row'<'col-sm-5'i><'col-sm-7'p>>"

【讨论】：