css 如何删除bootstrap 5导航栏中导航项右侧的黑点?

slhcrj9b  于 2022-11-26  发布在  Bootstrap
关注(0)|答案(1)|浏览(153)

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

这是结果显示,我只是显示了最左边的导航项目,但他们都有相同的黑点。

如何删除这些黑点?

edqdpe6u

edqdpe6u1#

因为nav元素是使用<ul><li>元素构造的,所以需要删除::marker元素。
您需要添加以下css:

li 
{
    list-style-type: none;
}

相关问题