【问题标题】:Angular-datatables Bootstrap search bar CSS [closed]Angular-datatables Bootstrap 搜索栏 CSS [关闭]
【发布时间】:2016-07-19 01:07:02
【问题描述】:

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

这是 angular-datatables 搜索栏:

这是 Jquery Datatables 搜索栏:

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

有谁知道我如何在角度数据表中使用常规的 Bootstrap 外观?也许我可以更改一些 CSS 代码?

【问题讨论】:

    标签: css angularjs twitter-bootstrap angular-datatables


    【解决方案1】:

    Angular dataTables 使用这个 css 类 .dataTables_filter input[type="search"] 覆盖引导 css,所以如果你想重新获得引导 css,你应该从 angular-datatables.css 文件中删除这个类。

    如果您不想编辑 dataTables 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 文件中,将其放在角度数据表和引导 css 之后。

    【讨论】:

    • 谢谢!我刚试过,它有效!但是,我真的不想更改默认的 .css 文件,而是在单独的 .css 文件中进行自己的更改。你有办法吗?
    • @T.Ferreira 更新了我的答案,
    • 做到了!太感谢了! :)
    猜你喜欢
    • 2019-05-21
    • 1970-01-01
    • 2021-05-04
    • 2016-12-27
    • 2013-10-17
    • 1970-01-01
    • 2022-11-03
    • 2021-07-22
    • 2014-05-29
    相关资源
    最近更新 更多