Bootstrap select drop down not expand

Question

Я использую js-плагин под названием «Bootstrap Select», но когда я его использую, падение вниз сводится вниз, но его только около 5 пикселей высотой.

Как мне его нормально сбрасывать?

$('.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

EDIT: Я пришел к выводу, что большинство бутстраповские вещи не работают.

Я не могу получить вкладки, таблетки или аккордеоны. Но в целом, 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

Вам не хватает CSS-файла Bootstrap и ваши другие проблемы могут возникнуть из-за неправильной укладки ваших зависимостей.

В этом порядке, как в примере.

CSS Файлы

• BootstrapCSS
• Bootstrap-выберите CSS
• Пользовательские CSS

JS файлы

• JQuery
• Bootstr apJS
• Bootstrap-выберите 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>