0

我尝试使用 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>

未垂直列出

4

1 回答 1

0

请在下面找到，它的工作完美。似乎您可能已经更改了引导程序的默认 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>

让我知道它是否不适合您。

于 2017-08-02T04:44:16.980 回答