Bootstrap下拉列表在水平描述中不起作用

时间:2015-06-10 13:12:15

标签: html css twitter-bootstrap

我正在尝试在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

为什么下拉菜单没有打开?有没有办法使它有效?

1 个答案:

答案 0 :(得分:2)

只需将下拉列表设置为相对位置

小提琴https://jsfiddle.net/DTcHh/8690/

代码

.dropdown-menu{position:relative}