如何从引导程序的下拉菜单中删除边框？

Question

我从引导程序复制并粘贴了一个下拉菜单，然后开始使用它。我首先复制了下拉菜单中的一个按钮，然后将其更改为带有锚标签的按钮。当我将其从按钮更改为锚点时，这些边框刚刚出现，并且我无法让它们消失。我几乎尝试了一切。

<div class="d-flex flex-column flex-md-row justify-content-center pb-3 px-md-4 mb-0 bg-white border-bottom box-shadow">
  <div class="btn-group">
    <div class="dropdown">
      <a href="#" onclick="loadPage('Crabs')" class="btn btn-secondary dropdown-toggle ml-3 mr-3 navbartext" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       Link
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <a class="dropdown-item" href="#" onclick="gotoDetail('cr01')">Medium Soft Shell Crabs</a>
        <a class="dropdown-item" href="#" onclick="gotoDetail('cr02')">Hotel Soft Shell Crabs</a>
        <a class="dropdown-item" href="#" onclick="gotoDetail('cr03')">Prime Soft Shell Crabs</a>
        <a class="dropdown-item" href="#" onclick="gotoDetail('cr04')">Jumbo Soft Shell Crabs</a>
        <a class="dropdown-item" href="#" onclick="gotoDetail('cr05')">Whale Soft Shell Crabs</a>
        <a class="dropdown-item" href="#" onclick="gotoDetail('cr06')">Crab Meat</a>
      </div>
   </div>
 </div>
</div>


#dropdownMenu2 {
    background-color: #ffffff;
    color: #4d4d4d;
}

.dropdown-menu {
    text-transform: capitalize;
}

/* Removes caret from dropdown menu button */
.dropdown-toggle::after{
    display: none;
}

.dropdown:hover .dropdown-menu{
    display: inherit;
  }

Answer 1

所以我在Codepen上渲染了您的代码。

看起来您只需要从父div移除类.border-bottom。

应该这样做。

Answer 2

对于引导程序4，您只需删除btn css类。这样，整个过程将像常规链接一样运行。链接的悬浮效果也可能很烦人，这就是为什么我在这里将其添加到CSS文件中的原因：

.dropdown-toggle:hover {
  color: black;
  text-decoration: none;
}

这会关闭link元素的悬停效果。