Question

我的custom.css文件中的以下css构建在核心boostrap css上，并具有类下拉菜单。此类与davidstutz / bootstrap-multiselect.js文件中的下拉菜单类冲突，该文件也使用核心引导程序css下拉菜单类。

有没有办法让custom.css下拉菜单类更具选择性，以免在不使用id的情况下影响bootstrap-multiselect元素？我不能使用id，因为我在同一页面上有多个下拉菜单。

custom.css的部分内容：

.dropdown-menu {
    background-color: #EEEEEE;
    border: 1px solid #D6D6D6;
    border-top-color: #EEEEEE;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.dropdown-menu > li > a {
    color: #515151;
    padding: 10px 20px;
    font-size: 12px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #FFF;
    background-color: #515151;
}

davidstutz / bootstrap-multiselect - bootstrap-multiselect.js：

templates: {              
            button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>',
                ul: '<ul class="multiselect-container dropdown-menu"></ul>',                
            filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',                
                li: '<li><a href="javascript:void(0);"><label></label></a></li>',                
            divider: '<li class="multiselect-item divider"></li>',                
            liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'            
        }

下拉菜单html：

<ul class="dropdown-menu">
    <li><a href="../about-us.html">About Us</a></li>
    <li><a href="../blog.html">Blog</a></li>
    <li><a href="../blog-timeline.html">Blog Timeline</a></li>
</ul>

multiselect html：

<select class="multiselect" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
</select>

Answer 1

你的bootstrap-multiselect.css没有显示给select标签的.multi选择类？

bootstrap-multiselect.js中的下拉菜单类干扰了我的自定义下拉菜单类

1 个答案: