Angular中的Boostrap 4导航栏下拉菜单在小型设备上不起作用

在Angular中，使用Bootstrap 4导航栏下拉菜单时，在小型设备上可能会出现不起作用的情况。这是因为Bootstrap 4的导航栏下拉菜单默认是通过鼠标悬停来触发的，而在小型设备上没有鼠标悬停的操作，因此无法触发下拉菜单。

解决这个问题的方法是使用Bootstrap 4提供的响应式工具类来实现下拉菜单的触发。具体步骤如下：

首先，在导航栏的下拉菜单元素上添加dropdown类和dropdown-toggle类，以及data-toggle="dropdown"属性。这样可以让下拉菜单在小型设备上通过点击触发。
然后，在下拉菜单的父元素上添加dropdown类。这样可以让下拉菜单在小型设备上显示出来。
最后，在下拉菜单的父元素上添加position-static类。这样可以避免下拉菜单在小型设备上被隐藏。

以下是一个示例代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

在上述示例代码中，我们在下拉菜单的父元素<li>上添加了dropdown类，以及在下拉菜单的触发元素<a>上添加了dropdown-toggle类和data-toggle="dropdown"属性。

这样，在小型设备上点击导航栏中的下拉菜单触发元素时，下拉菜单就会显示出来。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云开发（CloudBase）。