Question

我想用一个带有子菜单的书签创建菜单，但是我想制作一个可点击的书签，它是下拉按钮：

HOME

优惠

商店
服务

联系

我想打开“报价”页面和“商店”。

在bootstrap 4文档中，下拉按钮显示子菜单，无法单击此书签（在我的版本中为OFFER）。

在PC上，我们可以使用HOVER来创建它，但是在移动设备上将无法正常工作，那么该怎么做？

https://getbootstrap.com/docs/4.0/components/navbar/

Answer 1

在CSS方面，您可以使用@media进行交易，并以移动尺寸显示菜单。

我认为这种方法可以完成您的工作。

@media (min-width: 768px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }

Answer 2

我添加了一些代码： https://codepen.io/SkuterPL/pen/RwbXgYe

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="navbarNavDropdown" style="">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Offer</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Offer menu"></a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Shop</a>
          <a class="dropdown-item" href="#">Service</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

此代码在PC上有效，但在移动设备上无效，因为它在菜单中创建了新位置，因此在移动设备上，它会创建要单击的下一个书签，而不是在其旁边

具有下拉菜单但可单击的Bootstrap 4导航栏

2 个答案: