Bootstrap-Select下拉框无法打开、data-subtext使用及激活态黑边移除问题

问题1：下拉菜单无法展开的修复 #

错误原因 #

资源加载顺序不符合依赖要求：Bootstrap 是 Bootstrap-Select 的依赖项，必须先加载 Bootstrap 的 CSS、JS 文件，再加载 Bootstrap-Select 的相关资源，你当前代码中先加载了 Bootstrap-Select 资源，后加载 Bootstrap 核心资源，导致组件初始化失败。

正确的资源加载顺序 #

<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!--BootStrap 核心资源 先加载-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
 
<!--BootStrap Select 资源 后加载-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta/js/bootstrap-select.min.js"></script>

调整顺序后，data-subtext 属性的附加说明文本也会同步正常显示。

问题2：去掉激活状态的黑色边框 #

添加以下 CSS 代码即可覆盖组件默认的焦点、激活状态样式：

/* 移除下拉按钮激活/聚焦状态的边框和阴影 */
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select > .dropdown-toggle:active,
.bootstrap-select > .btn-light:not(:disabled):not(.disabled).active:focus, 
.bootstrap-select > .btn-light:not(:disabled):not(.disabled):active:focus{
    outline: none !important;
    box-shadow: none !important;
    border-color: #ced4da; /* 可自定义为你需要的普通状态边框色 */
}

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Select 示例</title>
    <!--jQuery-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

    <!--BootStrap 核心资源-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
 
    <!--BootStrap Select 资源-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta/js/bootstrap-select.min.js"></script>

    <style>
        /* 移除激活状态黑色边框 */
        .bootstrap-select > .dropdown-toggle:focus,
        .bootstrap-select > .dropdown-toggle:active,
        .bootstrap-select > .btn-light:not(:disabled):not(.disabled).active:focus, 
        .bootstrap-select > .btn-light:not(:disabled):not(.disabled):active:focus{
            outline: none !important;
            box-shadow: none !important;
            border-color: #ced4da;
        }
    </style>
</head>
<body>
<select class="strunz" data-show-subtext="true" data-size="8">
    <option class="optns" data-subtext="Heinz" value="0">Select car:</option>
    <option class="optns" data-subtext="Heinz" value="1">Audi</option>
    <option class="optns" data-subtext="Heinz" value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
</select>

<script>
    $('.strunz').selectpicker();
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Snake93