我有引导程序5导航栏和所有的工作都很好,除了导航项目都有一个黑点的右侧的文字。
下面是这一部分的代码。我试过改变参数之类的东西,甚至注解掉CSS和JavaScript,但到目前为止还没有找到关键。
<nav class="navbar navbar-expand navbar-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="/">Correlator 2</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item fs-5">
<a class="nav-link active" aria-current="page" href="/">Home .</a>
</li>
<li class="nav-item fs-5">
<a class="nav-link" href="/admin/">Admin Pages .</a>
</li>
<li class="nav-item fs-5 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item fs-5">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
<li class="nav-item dropdown notification-section">
<a href="#" class="notification dropdown-toggle" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="true">
<span><i class='fa fa-bell'></i></span>
<span class="badge" id="notification-badge">0</span>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown" id="notifications-dropdown"
data-popper-placement="bottom-end"
style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(-70px, 42px, 0px);">
{% for i in notifications %}
<li class="dropdown-item">{{i.message}}</li>
<hr class="dropdown-divider">
{% endfor %}
{% comment %} <li class='dropdown-item'>Hello</li>
<hr class="dropdown-divider"> {% endcomment %}
</ul>
</li>
<div class="flex-shrink-0 dropdown" style="margin-right: 20px">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle show" id="dropdownUser2"
data-bs-toggle="dropdown" aria-expanded="true">
<img src="{% static 'mike-oliver.jpg' %}"" alt="MO" width="50" height="50"
class="rounded-circle">
</a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"
data-popper-placement="bottom-end"
style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(-110px, 50px, 0px);">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
这是结果显示,我只是显示了最左边的导航项目,但他们都有相同的黑点。
如何删除这些黑点?
1条答案
按热度按时间edqdpe6u1#
因为
nav
元素是使用<ul>
和<li>
元素构造的,所以需要删除::marker
元素。您需要添加以下css: