引导选择下拉列表未被垂直列出
我试图使用引导选择来实现下拉框,但这些选项不是垂直列出的。有没有人有过同样的问题?引导选择下拉列表未被垂直列出
<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>
请在下面找到,它的工作完美。看起来你可能已经改变了bootstrap的默认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>
让我知道,如果它不为你工作。
OP有一些其他的CSS影响元素,这不会修复 – DelightedD0D
@ DelightedD0D:这就是问题所在,一切工作正常,他需要分享导致此问题的其他CSS。但同时你低估了我的答案。 –
是的,我做了,因为这个答案没有解决这个问题。你简单地替换了绝对的相关资源链接,没有理由相信会解决这个CSS冲突问题 – DelightedD0D
什么下拉框?你的意思是你用'selectpicker()'添加的select下拉菜单吗? – DelightedD0D
是的,DelightedD0D。我附上了一张照片供您参考。它现在是水平列出的,我想让它们垂直列出。 –
你必须有一些额外的CSS影响该元素,代码工作正常,请参阅https://jsfiddle.net/vgLcndpf/74/,右键单击该元素并找到导致问题的css规则并将其更改为 – DelightedD0D