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

【问题标题】：How to remove border from bootstrap's dropdown menu?如何从引导程序的下拉菜单中删除边框？
【发布时间】：2019-01-02 21:11:41
【问题描述】：

我从 bootstrap 复制并粘贴了一个下拉菜单，然后开始搞乱它。我首先复制了下拉菜单是按钮的那个，然后我将其更改为带有锚标签的那个。当我将它从按钮更改为锚点时，这些边框刚刚出现，我无法让它们消失。我几乎尝试了所有方法。

<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;
  }

【问题讨论】：

标签： html css drop-down-menu bootstrap-4 border

【解决方案1】：

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

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

应该可以的。

【讨论】：

我刚刚注意到图片中有另一个边框。我只是想明确一点，我指的是链接周围的边框。
哦，您可以删除链接按钮上名为type="button" 的属性。该属性将-webkit-appearance: button 添加到默认具有这些边框的代码中。 @Survolt1034
您必须从 css 类 .btn-secondary 中删除/覆盖 webkit-appearance: button; AND border-color。按 F12 学习打开开发者工具，然后在那儿玩。

【解决方案2】：

对于 bootstrap 4，您可以简单地删除 btn css 类。然后整个事情将表现得像一个常规链接。链接的悬停效果也可能很烦人，这就是为什么我将其添加到我的 css 文件中：

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

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

【讨论】：