NavBar中的nav-item下拉菜单，使用btn-outline时是否有任何使其边框显示的方法？

时间：2019-03-17 21:30:51

标签： css bootstrap-4 navbar

我可以在常用的Navbar导航项目上使用轮廓样式的按钮，但是当它是“导航项目”下拉菜单时，该按钮未显示其边框，请参见下图。有什么办法让它显示边框？

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 个答案:

答案 0 :(得分：1)

不确定，为什么在这里使用nav-item，但是如果要使用btn-outline-secondary类，那么还需要添加btn类，see here 

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

相关问题
最新问题