Html 如何从引导中删除边框';什么是下拉菜单?

Html 如何从引导中删除边框';什么是下拉菜单?,html,css,drop-down-menu,bootstrap-4,border,Html,Css,Drop Down Menu,Bootstrap 4,Border,我从bootstrap复制并粘贴了一个下拉菜单,然后开始摆弄它。我首先复制了一个下拉菜单是一个按钮的地方,然后我把它改成了一个带有锚定标签的地方。当我把它从按钮改为锚定时,这些边界就出现了,我无法让它们消失。我几乎什么都试过了 #下拉菜单2{ 背景色:#ffffff; 颜色:#4d; } .下拉菜单{ 文本转换:大写; } /*从下拉菜单按钮中删除插入符号*/ .下拉切换::之后{ 显示:无; } .下拉菜单:悬停.下拉菜单{ 显示:继承; } 所以我在Codepen上呈现了你的代码 看起来

我从bootstrap复制并粘贴了一个下拉菜单,然后开始摆弄它。我首先复制了一个下拉菜单是一个按钮的地方,然后我把它改成了一个带有锚定标签的地方。当我把它从按钮改为锚定时,这些边界就出现了,我无法让它们消失。我几乎什么都试过了


#下拉菜单2{
背景色:#ffffff;
颜色:#4d;
}
.下拉菜单{
文本转换:大写;
}
/*从下拉菜单按钮中删除插入符号*/
.下拉切换::之后{
显示:无;
}
.下拉菜单:悬停.下拉菜单{
显示:继承;
}

所以我在Codepen上呈现了你的代码

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


这应该可以做到。

对于Bootstrap4,您只需删除
btn
css类即可。然后整个过程就像一个常规链接。链接的悬停效果也很烦人,这就是为什么我在我的css文件中添加了以下内容:

。下拉切换:悬停{
颜色:黑色;
文字装饰:无;
}

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

我刚注意到图片中有另一个边框。我只是想澄清一下,我指的是链接周围的边框。哦,你可以删除链接按钮上名为
type=“button”
的属性。该属性将
-webkit外观:按钮
添加到具有默认边框的代码中@survolt1034您必须删除/覆盖
webkit外观:按钮.btn secondary
的code>和
边框颜色
。学习通过按F12打开开发工具,然后在那里玩。
<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;
  }