如何使用引导 css 制作导航项？答案

【问题标题】：How to make a nav-item with bootstrap css?如何使用引导 css 制作导航项？
【发布时间】：2019-05-18 20:50:19
【问题描述】：

所以我遇到了这个问题，我可以按照自己的意愿工作，但我不知道如何使文本“Profil”看起来像标准的 Bootstrap 导航项？请参阅“Zahlungen”以供参考。

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../mainStyle.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>

<body>
  <!-- Navigationbar -->
  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="../Zahlungsuebersicht/Zahlungsuebersicht.jsp">Zahlungen <i class="fas fa-receipt"></i></a>
      </li>
      <!-- Profil -->
      <li class="nav-item">
        <span class="nav-link">
          <a href="#yourlink">Profil </a>
          <i class="fas fa-user dropdown-toggle" href="#" id="navbardrop2" data-toggle="dropdown"></i>
          <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#bearbeiten">Profil bearbeiten <i class="fas fa-user-edit"></i></a>
            <a class="dropdown-item" href="#abmelden">Abmelden <i class="fas fa-sign-in-alt"></i></a>
          </div>
       </span>
      </li>
    </ul>
  </nav>
</body>

【问题讨论】：

标签： html css bootstrap-4 navigation nav

【解决方案1】：

如果您的意思是只希望链接 Profil 具有相同的颜色，那么只需将类 nav-link 添加到您的 <a> 标记。

将<i> 标签包裹在锚点中，这样点击您的图标也会导致下拉菜单。

编辑：保持在同一行：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#yourlink">Profil 
    <i class="fas fa-user" href="#" id="navbardrop2" ></i>
  </a>
  <div class="dropdown-menu dropdown-menu-right">
     <a class="dropdown-item" href="#bearbeiten">Profil bearbeiten <i class="fas fa-user-edit"></i></a>
     <a class="dropdown-item" href="#abmelden">Abmelden <i class="fas fa-sign-in-alt"></i></a>
   </div>
</li>

目前它从 Bootstrap 的默认样式中继承了蓝色突出显示颜色，但是通过将类添加到标签中，它将应用该类的样式。

通过还将dropdown-toggle 类和data-toggle="dropdown" 添加到<a>，现在单击Profil 时将触发下拉菜单

Bootstrap 的伪类 :after 会出现向下箭头符号。

【讨论】：

感谢您的回答。我已经尝试过了，但是当我这样做时，下拉菜单会在文本下方移动，并且不再只是全部在 1 行中。
我已经修改了我的答案以适应。
对不起，但我希望它像两个独立的元素，就像您在“Profil”上有链接，然后在右侧也有下拉菜单。有没有其他方法可以从引导程序中获得 css 效果？这就是我添加<span> 元素的原因，它适用于<i> 元素，但不适用于<a> 元素。
拆分下拉菜单或Profil完全独立？因为如果它是分开的，您可以将 <i> 包裹在一个新的 <a> 中以适应

【解决方案2】：

必须在锚标签内使用 navlink 类。

<li class="nav-item"> <a href="#" class="nav-link">Profile</a> </li>

【讨论】：