Раскрывающийся список nav-item в NavBar, есть ли способ заставить его отображать границы при использовании на нем btn-outline? - PullRequest
Новая
       5

Раскрывающийся список nav-item в NavBar, есть ли способ заставить его отображать границы при использовании на нем btn-outline?

1 голос
/ 18 марта 2019

Я могу использовать кнопки в стиле контура на общем элементе навигации Navbar, но когда это «выпадающий элемент nav», кнопка не показывает свои границы, см. Изображение ниже.Есть ли способ заставить его показывать границы?

enter image description here

<!-- Dropdown -->
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle btn-outline-secondary" href="#" id="navbardrop" data-toggle="dropdown" role="button">
        Disprofarma
    </a>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="/PedidoDisprofarma/Index">Pedidos</a>
        <a class="dropdown-item" href="/RecepcionDisprofarma/Index">Recepción de Pedidos</a>
    </div>
</li>

1 Ответ

1 голос
/ 18 марта 2019

Не уверен, почему вы используете nav-item здесь, но если вы хотите использовать btn-outline-secondary класс, то вам нужно добавить также btn класс, см. Здесь 

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.3.1/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>
</head>

<body>

  <!-- Dropdown -->
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle btn btn-outline-secondary" href="#" id="navbardrop" data-toggle="dropdown" role="button">
        Disprofarma
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="/PedidoDisprofarma/Index">Pedidos</a>
      <a class="dropdown-item" href="/RecepcionDisprofarma/Index">Recepción de Pedidos</a>
    </div>
  </li>
</body>
...