Bootstrap dropdown не работает внутри Горизонтальное описание

Question

Я пытаюсь отобразить выпадающее меню внутри horizontal description, но выпадающее меню просто не переключается.

<div class="container-fluid"> 
    <div class="row vertical-align"> 
    <dl class="dl-horizontal"> 
     <dt> 
     <div class="dropdown"> 
      <button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Le panneau latéral <span class="caret"></span></button> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#" role="menuitem">test1</a></li> 
      <li><a href="#" role="menuitem">test2</a></li> 
      </ul> 
     </div> 
     </dt> 
     <dd>Le panneau latéral est composé de différentes sections dynamiques qui se mettent à jour automatiquement en fonction des objets sélectionnés dans la carte. Ces sections sont: l'outil de recherche qui permet de déplacer la carte sur un objet géographique en particulier, la zone graphique, le gestionnaire de couches, l'outil information, le constat, et la légende de la carte.</dd> 
    </dl> 
    </div> 
</div> 

See My Fiddle

Почему не открытие выпадающее меню? Есть ли способ заставить его работать?

Answer 1

Просто надо установить ниспадающее меню, чтобы относительное положение

Скрипки: https://jsfiddle.net/DTcHh/8690/

Код:

.dropdown-menu{position:relative}