如何使用Bootstrap CSS制作Nav-Mitem

所以我遇到了这个问题，我一直都在工作，但是我不知道我如何使文本" 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>

如果您是指链接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的伪类别出现：

之后

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

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

相关内容

最新更新

热门标签：