css - Bootstrap Select 下拉列表未垂直列出

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>

Not Vertically Listed

Answer 1

请在下面找到，它工作完美。看起来你可能已经更改了 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>

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