CSS引导带导航栏滚动创建项目符号而不是右nabber项目答案

【问题标题】：CSS Boot strap navbar scrolling creating bullet point instead of a right nabber itemCSS引导带导航栏滚动创建项目符号而不是右nabber项目
【发布时间】：2020-07-25 14:29:38
【问题描述】：

我添加了一个带引导程序的导航栏。但是，如果用户是管理员，它似乎将每个项目视为一个项目符号，而不是在 nabber 中创建一个带有下拉列表的导航栏......如果不是，我应该有一个导航栏。

我不明白我的错误在哪里。我的风格，CSS 是空的...仅使用引导程序

感谢您的帮助：

<body>
    <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
        <div class="container topnav">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand topnav" href="{{ url_for('home.homepage') }}">Project</a>
          </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <li class="nav navbar-nav navbar-right">
                    {% if current_user.is_authenticated %}

                          {% if current_user.is_admin %}
                              <li class="nav-item dropdown">

                                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                                     <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="{{ url_for('home.admin_dashboard') }}">Dashboard</a>
                                        <a class="dropdown-item" href="{{ url_for('admin.list_departments') }}">Departments</a>
                                        <a class="dropdown-item" href="{{ url_for('admin.list_roles') }}">Roles</a>
                                        <a class="dropdown-item" href="{{ url_for('admin.list_employees') }}">Users</a>
                                    </div>


                              {% else %}
                                <li><a href="{{ url_for('home.dashboard') }}">Dashboard</a></li>
                          {% endif %}
                          <li><a class="nav-item" href="{{ url_for('auth.logout') }}">Logout</a></li>
                          <li><a><i class="nav-item" class="fa fa-user"></i>  Hi, {{ current_user.username }}!</a></li>
                    {% else %}
                          <li><a class="nav-item" href="{{ url_for('home.homepage') }}">Home</a></li>
                          <li><a class="nav-item" href="{{ url_for('auth.register') }}">Register</a></li>
                          <li><a class="nav-item" href="{{ url_for('auth.login') }}">Login</a></li>
                    {% endif %}
              </ul>
          </div>
        </div>
    </nav>

这是我的结果。我不明白为什么有项目符号点，为什么它不在右侧

【问题讨论】：

请将您的代码放入sn-p
什么意思？我把代码放在我的需求中？
stackoverflow.com/help/minimal-reproducible-example

标签： css bootstrap-4

【解决方案1】：

下面的 sn-p 应该适合你...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md navbar-expand-sm bg-light navbar-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <!-- Links -->
    <ul class="navbar-nav">

      <li><a href="{{ url_for('home.dashboard') }}">Dashboard</a></li>
      <li><a class="nav-item" href="{{ url_for('auth.logout') }}">Logout</a></li>
      <li><a><i class="nav-item" class="fa fa-user"></i>  Hi, {{ current_user.username }}!</a></li>
      <li><a class="nav-item" href="{{ url_for('home.homepage') }}">Home</a></li>
      <li><a class="nav-item" href="{{ url_for('auth.register') }}">Register</a></li>
      <li><a class="nav-item" href="{{ url_for('auth.login') }}">Login</a></li>
      <!-- Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="{{ url_for('home.admin_dashboard') }}">Dashboard</a>
          <a class="dropdown-item" href="{{ url_for('admin.list_departments') }}">Departments</a>
          <a class="dropdown-item" href="{{ url_for('admin.list_roles') }}">Roles</a>
          <a class="dropdown-item" href="{{ url_for('admin.list_employees') }}">Users</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<br>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>

【讨论】：