Bootstrap4 nav активная ссылка, чтобы поставить выпадающую стрелку - PullRequest
Новая
       1

Bootstrap4 nav активная ссылка, чтобы поставить выпадающую стрелку

0 голосов
/ 16 октября 2019

Я использовал мой угловой проект для начальной загрузки 4, я пытался добавить активный текст класса Nav после стрелки раскрывающегося списка, но он не работает правильно, как я могу сделать это правильно, спасибо.

Я пытался сделатькак один

I tried to do like one

a:after {
  content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin: 0 0 0 -3px;
  z-index: 100;
}

.nav-underline .nav-link:hover {
  color: #25AAE1;
}

.nav-underline .active {
  font-weight: 500;
  color: #25AAE1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="nav-scroller  py-1 mb-2">
  <nav class="nav  d-flex justify-content-between">
    <a class="p-2 " (click)="toggletest()">Status <span class="lx-status-run  " style="    position: relative;
    margin-top: 0.5rem;
    float: right;
    margin-left: 0.5rem;"></span></a>
    <a class="p-2 active ">Home</a>
    <a class="p-2 ">About</a>
    <a class="p-2 ">Contact</a>

  </nav>
</div>

Ответы [ 2 ]

3 голосов
/ 16 октября 2019

Относительно позиционированный элемент - это элемент, вычисленное значение позиции которого является относительным. Свойства top и bottom задают вертикальное смещение от его нормального положения;свойства left и right определяют горизонтальное смещение.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

a необходимо позиционировать относительно. 

a {
  position: relative;
}

a:after {
  content: '';
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #000;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  z-index: 100;
}

.nav-underline .nav-link:hover {
  color: #25AAE1;
}

.nav-underline .active {
  font-weight: 500;
  color: #25AAE1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="nav-scroller  py-1 mb-2">
  <nav class="nav  d-flex justify-content-between">
    <a class="p-2 " (click)="toggletest()">Status <span class="lx-status-run  " style="    position: relative;
    margin-top: 0.5rem;
    float: right;
    margin-left: 0.5rem;"></span></a>
    <a class="p-2 active ">Home</a>
    <a class="p-2 ">About</a>
    <a class="p-2 ">Contact</a>

  </nav>
</div>
2 голосов
/ 16 октября 2019

Вы можете использовать этот код 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    
    a:after {
      content: url(http://www.w3.org/2000/svg);
      height: 0;
      width: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #000;
      position: absolute;
      top: 38px;
      left: 33.8%;
      margin: 0;
      z-index: 100;
    }
    
    .nav-underline .nav-link:hover {
      color: #25AAE1;
    }
    
    .nav-underline .active {
      font-weight: 500;
      color: #25AAE1;
    }
    
    .lx-status-run {
      position: relative;
      margin-top: 0.5rem;
      float: right;
      margin-left: 0.5rem;
    }
  </style>
</head>

<body>
  <div class="nav-scroller  py-1 mb-2">
    <nav class="nav d-flex justify-content-between">
      <a class="p-2 " (click)="toggletest()">Status <span class="lx-status-run"></span></a>
      <a class="p-2 active">Home</a>
      <a class="p-2 ">About</a>
      <a class="p-2 ">Contact</a>
    </nav>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

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

Нет похожих вопросов

...