Bootstrap Select 下拉菜单未垂直列出答案

【问题标题】：Bootstrap Select Drop Down is not Vertically ListedBootstrap Select 下拉菜单未垂直列出
【发布时间】：2017-08-02 04:36:40
【问题描述】：

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

【问题讨论】：

什么下拉框？您是指使用selectpicker() 添加的选择下拉菜单吗？
是的，DelightedD0D。我在那里附上了一张图片供您参考。它现在是水平列出的，我想让它们垂直列出。
您必须有一些额外的 css 影响该元素，代码可以正常工作，请参阅 jsfiddle.net/vgLcndpf/74，右键单击该元素并找到导致问题的 css 规则并更改它
查看控制台是否有错误，我猜你的 js 或 css 没有正确加载
@Exprator 你为什么这么说？看起来像一个简单的 css 冲突

标签： css twitter-bootstrap bootstrap-selectpicker

【解决方案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>

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

【讨论】：

OP 有一些影响元素的其他 CSS，这不会解决这个问题
@DelightedD0D：这就是问题所在，一切正常，他需要分享导致此问题的其他 css。但与此同时，您对我的回答投了反对票。
是的，我做到了，因为这个答案对解决问题没有任何帮助。您只是将相对资源链接替换为绝对资源链接，没有理由相信这会解决这个 css 冲突问题
如果 OP 修改了 Bootstrap（不建议，你应该覆盖而不是修改库）但是可以说他做了，如果是这样，他可能在其他地方需要这些更改，因此简单地更改为 CDN 版本很可能会解决此问题并破坏其他内容。 OP 需要找到冲突的 CSS 规则并正确修复它。这可以通过简单地右键单击元素并查看应用的样式来轻松完成。你的回答没有提到这些。
@ShyamShinadiya 是对的。如果示例在此处与 OP 提供的代码一起使用，而问题在其他地方，那么如果他没有发布更多代码/css，那么尝试回答他是没有意义的。