Bootstrap 链接项目中的下拉菜单答案

【问题标题】：Drop down in Bootstrap linked itemsBootstrap 链接项目中的下拉菜单
【发布时间】：2017-05-09 10:43:15
【问题描述】：

我的页面上有一个引导列表（链接项目），如下所示：

<div class="list-group">
  <a href="#" class="list-group-item">One</a>
  <a href="#" class="list-group-item">Two</a>
  <a href="#" class="list-group-item">Three</a>
</div>

我正在尝试在列表底部添加一个下拉菜单。到目前为止，我还没有能够做到这一点，也没有在 Google 或 SO 上找到足够的答案。

尝试了这个解决方案，但下拉菜单没有成为列表的一部分：

<a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo $year; ?>
<span class="caret"></span></a>
<ul class="dropdown-menu">
  <?php while ($row = $myvar->fetch()) {;?>
      <li role="presentation"><a href="#"><?php echo $row['year']; ?> </a></li>
  <?php } ?> 
</ul>

【问题讨论】：

你是否将带有类下拉列表的 div 作为父级？
见bootply.com/keRCt11XVj

标签： list twitter-bootstrap-3 dropdown

【解决方案1】：

将下拉列表放入<div class="list-group-item">...

<div class="list-group">
  <a href="#" class="list-group-item">One</a>
  <a href="#" class="list-group-item">Two</a>
  <a href="#" class="list-group-item">Three</a>
  <div class="list-group-item">
    <a class="dropdown-toggle" href="" data-toggle="dropdown">Link <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li role="presentation"><a href="#">text</a></li>
    </ul>
  </div>
</div>

http://www.bootply.com/gOI82wBTTf

【讨论】：

【解决方案2】：

将父 <div> 与类下拉菜单一起尝试

举例

<div class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo $year; ?> <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <?php while ($row = $myvar->fetch()) {;?>
          <li role="presentation"><a href="#"><?php echo $row['year']; ?> </a></li>
      <?php } ?> 
    </ul>
</div>

【讨论】：