如何删除 Bootstrap 下拉列表中的“标记”元素？

ilmyapht 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(3)|浏览(120)

我做了一个帐户选项下拉在我的网站上使用 Bootstrap ，它使用您的帐户图片作为一个按钮。问题是由于某种原因，当它运行时，创建了一个：：marker元素，它在下拉列表旁边显示为一个黑色的项目符号。我已经将我的代码粘贴到一个片段中，当你运行它时，你可以看到完全相同的事情发生。我唯一的想法是使用一些JavaScript来删除这个元素，但我认为一定有更好的方法或我遗漏的东西。我已经搜索了一段时间的文档，尽管无可否认没有那么仔细。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<li class="nav-item dropdown">
  <a href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <img id="acc" alt="Your Profile Picture" class="pfp" src="https://lh3.googleusercontent.com/a-/AAuE7mAJhsrc2jWxXLM1-t503rYNBj128tuqFiQUgSVI2dQ=k-s48"></img>
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Profile</a>
    <a class="dropdown-item" href="#">Account settings</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Log out</a>
  </div>
</li>

twitter-bootstrap

来源：https://stackoverflow.com/questions/66336221/how-to-remove-marker-element-in-bootstrap-dropdown

3条答案

按热度按时间

arknldoa1#

你已经用<ul>标签覆盖了<li>标签，并添加了这个css：

li {
    list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<ul>
<li class="nav-item dropdown">
    <a href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <img id="acc" alt="Your Profile Picture" class="pfp" src="https://lh3.googleusercontent.com/a-/AAuE7mAJhsrc2jWxXLM1-t503rYNBj128tuqFiQUgSVI2dQ=k-s48"></img>
    </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Profile</a>
    <a class="dropdown-item" href="#">Account settings</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Log out</a>
  </div>
</li>
</ul>

赞(0）回复(0）举报 2023-09-28

lnlaulya2#

这里的问题是，我使用了“nav-item”类，而我应该只使用““，因为这不是导航栏的一部分。

赞(0）回复(0）举报 2023-09-28

cs7cruho3#

marker元素是由作为<ul>列表的<li>元素的<li>项生成的。如果你想把它从列表中去掉，把它改成其他的东西，比如a，“.”或marker元素应该消失。

赞(0）回复(0）举报 2023-09-28