引导选择下拉列表未被垂直列出

我试图使用引导选择来实现下拉框，但这些选项不是垂直列出的。有没有人有过同样的问题？引导选择下拉列表未被垂直列出

<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

来源

2017-08-02 David Yang

什么下拉框？你的意思是你用'selectpicker（）'添加的select下拉菜单吗？ – DelightedD0D

是的，DelightedD0D。我附上了一张照片供您参考。它现在是水平列出的，我想让它们垂直列出。 –

你必须有一些额外的CSS影响该元素，代码工作正常，请参阅https://jsfiddle.net/vgLcndpf/74/，右键单击该元素并找到导致问题的css规则并将其更改为 – DelightedD0D

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

让我知道，如果它不为你工作。

来源

2017-08-02 04:44:16

OP有一些其他的CSS影响元素，这不会修复 – DelightedD0D

@ DelightedD0D：这就是问题所在，一切工作正常，他需要分享导致此问题的其他CSS。但同时你低估了我的答案。 –

是的，我做了，因为这个答案没有解决这个问题。你简单地替换了绝对的相关资源链接，没有理由相信会解决这个CSS冲突问题 – DelightedD0D

引导选择下拉列表未被垂直列出

回答

相关问题