Question

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

<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>

Answer 1

将父<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>

Answer 2

将下拉列表放在<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

下载Bootstrap链接项

2 个答案: