如何删除导航-项目在我的引导5肚脐栏右侧的黑点？

Question

我有引导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>

这是结果显示，我刚才显示了最左边的导航项目，但它们都有相同的黑点。

​

​

我该怎么去除那些黑点？

Answer 1

因为您的nav元素是使用<ul>和<li>元素构造的，所以您需要删除::marker元素。

您需要添加以下css：

li 
{
    list-style-type: none;
}