Question

使用bootstrap的HTML代码：

    <div class="col-md-2">
    <div class="form-group">
         <label id="lbl_dataset">Select Number</label>
         <select class="selectpicker">
           <option>1</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option selected="selected">5</option>
           <option>6</option>
         </select>
       </div>
       </div>

这里的问题是隐藏了下拉列表，只有在多次刷新页面后它才会显示。

在调试时，发现由于这个css代码而导致下拉列表消失

select.bs-select-hidden，select.selectpicker { 显示：无！重要; }

尝试了很多次来覆盖bootstrap css，但它没有用。

关于如何覆盖bootstrap css的任何想法？

Answer 1

如果您没有通过CDN使用引导程序：在Chrome开发工具中，检查选择器，找到display：none行。在代码行右侧，它说明了它所在的文件。使用该信息，您可以手动删除该行而不是覆盖它。

Answer 2

加载bootstrap-select.js

时一定有问题

应隐藏“select”元素。当“bootstrap-select”加载时，它隐藏“select”并创建包含所有列表项的新div。

bootstrap-select.css - 隐藏“select”（除其他外）

bootstrap-select.js - 创建新的HTML元素（例如新的下拉列表）

下拉列表被隐藏

2 个答案: