Как сделать nav-item с помощью начальной загрузки css? - PullRequest
Новая
       77

Как сделать nav-item с помощью начальной загрузки css?

0 голосов
/ 18 мая 2019

Итак, у меня есть проблема: у меня все работает так, как я хочу, но я не могу понять, как сделать текст «Профиль» похожим на стандартный навигационный элемент 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>

Ответы [ 2 ]

0 голосов
/ 18 мая 2019

Необходимо использовать класс navlink внутри тега привязки.

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

0 голосов
/ 18 мая 2019

Если вы хотите, чтобы ссылка Profil была одного цвета, просто добавьте класс nav-link к тегу <a>.

Оберните тег <i> в привязке, так что нажатие на ваш значок также вызывает выпадающий список.

EDIT : сохранение всего в одной строке: 

<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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...