"引导程序选择"下拉列表未垂直列出

Question

我尝试使用bootstrap-select来实现一个下拉框，但选项没有垂直列出。以前有人遇到过同样的问题吗？

<script src="{% static 'risk_parity/js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'risk_parity/js/bootstrap.min.js' %}"></script>
<link href="{% static 'risk_parity/css/bootstrap.min.css' %}" rel="stylesheet">

<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<select class="selectpicker" >
<option>USA</option>
<option>CA</option>                     
</select>

<script>
$(document).ready(function(){           
$('.selectpicker').selectpicker();
});
</script>

未垂直列出

Answer 1

请在下面找到，它的工作完美。似乎您可能已经更改了引导程序的默认 CSS，或者您添加了内联 css，因此会发生这种情况。

$(document).ready(function(){           
$('.selectpicker').selectpicker();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<select class="selectpicker" >
<option>USA</option>
<option>CA</option>                     
</select>

如果它不适合您，请告诉我。