Question

我正在使用名为“Bootstrap Select”的js插件，但是当我使用它时，下拉列表会降低，但它只有5px高。

如何让它正常下降？

$('.selectpicker').selectpicker();

<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">

<!-- JavaScript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://silviomoreto.github.io/bootstrap-select/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>1st Degree</option>
  <option>2nd Degree</option>
</select>

Codepen：

http://codepen.io/anon/pen/WQorjb

编辑：我已经意识到大多数引导程序都无法正常工作。

我也无法获得标签，药片或手风琴。但总的来说，bootstrap IS在网站上工作。所以我不明白。

Answer 1

问题在于您未包含plugin's CSS：

<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/bootstrap-select.min.css">

请看your CodePen updated。

Answer 2

您缺少Bootstrap-select CSS文件，而您的其他问题可能源于您的依赖项未正确堆叠。

就像这个例子一样。

CSS文件

BootstrapCSS
Bootstrap-select CSS
自定义CSS

JS档案

jQuery
BootstrapJS
Bootstrap-select JS

$(document).ready(function() {

  $('.selectpicker').selectpicker();

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css" rel="stylesheet" />

<div class="container">
  <select class="selectpicker">
    <option>1st Degree</option>
    <option>2nd Degree</option>
  </select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap选择下拉列表不展开

2 个答案: