如何在不使用按钮的情况下制作引导下拉菜单？（角度 4+）答案

【问题标题】：How to make the bootstrap drop-down without using button? (Angular 4+)如何在不使用按钮的情况下制作引导下拉菜单？（角度 4+）
【发布时间】：2020-03-02 08:38:25
【问题描述】：

我正在使用 Angular 8，我需要制作一个简单的下拉菜单。我的设计是这样的：

StackBlitz

但唯一的区别是我不想使用按钮样式，而是需要人字形。只是一个简单的下拉菜单，我可以在其中单击该下拉菜单中的不同链接。

【问题讨论】：

尝试角材料选择组件。它可能适合您的要求
我想你正在寻找<select>元素。

标签： javascript css angular twitter-bootstrap-3 drop-down-menu

【解决方案1】：

我的理解是，您需要删除按钮样式下拉触发器，并需要添加一个 V 形图标。

我已通过将font-awesome css 导入到 styles.css 文件中，将其添加到项目中。

styles.css

/* Add application styles & imports to this file! */
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")

app-component.html

<div class="container" style="margin-top: 10%">
  <div class="btn-group" dropdown>
    <span id="button-basic" dropdownToggle aria-controls="dropdown-basic">
      <i class="fa fa-chevron-down"></i>
    </span>
    <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
        role="menu" aria-labelledby="button-basic">
      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
      </li>
    </ul>
  </div>
</div>

您可以根据需要为 V 形添加任何其他样式。

【讨论】：