Angular-数据表Bootstrap 搜索栏CSS

Question

我正在使用 angular-datatables 与 Bootstrap 集成。但是，搜索栏看起来很奇怪。它看起来不像具有漂亮发光效果的普通 Bootstrap 文本字段。

这是 angular-数据表搜索栏：

这是 Jquery 数据表搜索栏：

我没有做错任何事情，因为 angular-datatables 网站上的演示看起来一样：https://l-lin.github.io/angular-datatables/#/bootstrapIntegration

有谁知道如何让 Bootstrap 在 angular- 数据表中进行常规查看？也许我要更改一些 CSS 代码？

Answer 1

Angular dataTables 覆盖了 bootstrap css，这个 css class .dataTables_filter input[type="search"] 所以如果你想重新获得 bootstrap css 你应该从 angular-datatables.css 文件中删除这个 class。

如果您不想编辑数据表 css 您可以添加：

.dataTables_filter input[type="search"]:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

到你的 css 文件，把它放在 angular 数据表和 bootstrap css.

之后

Angular-数据表Bootstrap 搜索栏CSS

Angular-datatables Bootstrap search bar CSS

css

twitter-bootstrap

angularjs

angular-datatables