ubold的css文件app-material、bootstrap-material对bootstrap-table有影响的语句

原创已于 2022-11-13 10:59:06 修改 · 385 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #css #前端

于 2022-11-13 10:55:08 首次发布

这篇日志探讨了在使用ubold后台模板时遇到的CSS冲突问题，特别是与bootstrap-table的兼容性。由于app-material.min.css和bootstrap-material.min.css中的"display:none;"属性，导致表格显示不正常和下拉菜单无法显示。通过添加特定CSS覆盖原有样式，成功解决了这些问题。

纯粹当做日志记录一下

背景：
采用ubold后台模板，index页面通过jquery load不同的页面，来实现后台不同页面的调用。其中需要调用含有bootstrap-table 的页面，由于有css的冲突，导致1.表格显示不出来；2.bootstrap-table的下拉菜单不能显示出来。

问题原因：

app-material.min.css

table[data-toggle=table]{display:none}

由于是在

元素中添加

来调用，而刚好 app-material.min中含有table[data-toggle=table]{display:none}，把它删除即可。（或许通过javascript调用形式就不会出现这个问题，但没有尝试）；

bootstrap-materia.min.css

dropdown-menu
{
   position:absolute;
   top:100%;
   left:0;
   z-index:1000;
   display:none;
   float:left;
   min-width:10rem;
   font-size:.875rem;
   color:#6c757d;
   text-align:left;
   list-style:none;
   background-color:#fff;
   background-clip:padding-box;
   border:1px solid #e3e8eb;
   border-radius:.2rem;
   margin:.125rem 0 0;
   padding:.25rem 0;
}

bootstrap-materia.min.css中dropdown-menu{ ……}中含有"display:none;"，在含有bootstrap-table页面中添加下面的语句覆盖原有的dropdown-menu{ ……}。

<style>
    table .dropdown-menu
    {
        position:absolute;
        top:100%;
        left:0;
        z-index:1000;
        display:block;
        float:left;
        min-width:10rem;
        font-size:.875rem;
        color:#6c757d;
        text-align:left;
        list-style:none;
        background-color:#fff;
        background-clip:padding-box;
        border:1px solid #e3e8eb;
        border-radius:.2rem;
        margin:.125rem 0 0;
        padding:.25rem 0;
    }
</style>