html - 如何从 Bootstrap 的下拉菜单中删除边框?

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

我从 bootstrap 复制并粘贴了一个下拉菜单,然后开始摆弄它。我首先复制了下拉菜单是一个按钮的那个,然后我把它改成了带有 anchor 标签的那个。当我将它从按钮更改为 anchor 时,这些边框就出现了,我无法让它们消失。我几乎尝试了一切。

sample

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

最佳答案

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

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

应该这样做。

关于html - 如何从 Bootstrap 的下拉菜单中删除边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51529234/

相关文章:

python - Flask:如何通过点击链接来更改html中flask变量的值

html - 在图像 HTML 上自动调整文本大小

javascript - 如何在文本区域内添加标签?

javascript - 在提交表单时打开 Bootstrap 模式

css - react native ListView 设计

css - 如何使用 React Material-UI、fontAwesome 图标和 Tailwind.css 左对齐所有列表项

javascript - Django:显示字典中的图像

javascript - 如何让这个 Bootstrap 下拉菜单出现在固定页眉的顶部?

Javascript 下拉列表禁用选项

java - java selenium中的下拉选择问题