引导选择器闪烁答案

【问题标题】：bootstrap selectpicker flicker引导选择器闪烁
【发布时间】：2018-12-31 16:06:28
【问题描述】：

重新排列 jQuery 并将 popper.js 与 bootstrap 4 一起使用

$('.selectpicker').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<select class="selectpicker" name = "usertype"   title="User Type"  required="true" data-size="7">
            <option value="0"> test1 </option>
            <option value="2"> test2 </option>
            <option value="4"> test3 r</option>
            <option value="6"> test4 </option>
</select>
 <input name = "first_name"  type="text" placeholder="Name" class="form-control"  required="true" value = "">

 <input name = "last_name"  type="text" placeholder="Name" class="form-control"  required="true" value = "">

【问题讨论】：

提供demo让我们看看

标签： jquery html css bootstrap-4

【解决方案1】：

重新排列 jQuery 并在 bootstrap 4 中使用 popper.js

$('.selectpicker').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<select class="selectpicker" name = "usertype"   title="User Type"  required="true" data-size="7">
            <option value="0"> test1 </option>
            <option value="2"> test2 </option>
            <option value="4"> test3 r</option>
            <option value="6"> test4 </option>
</select>

【讨论】：