时间戳

首页 > 解决方案 > 导航栏切换器无法正常工作

html - 导航栏切换器无法正常工作

问题描述

我想使用 navbar-toggler 但我有两个问题，请先查看我的代码：

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Admin</title>
</head>
<body>

<nav class="navbar navbar-toggler-sm navbar-light  bg-success">
  <button class="navbar-toggler navbar-toggler-right">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a href="#" class="navbar-brand" style="color: white">management</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav" style="color: white">
      <li class="nav-item1"><a class="nav-link active"> Dashboard</a></li>
      <li class="nav-item2"><a class="nav-link">Ads</a></li>
      <li class="nav-item3"><a class="nav-link">Users</a></li>
    </ul>
  </div>
</nav>

1- navbar-brand 和 navbar-icon 在导航栏中处于相反的位置（页面中的左右），但我希望它们彼此相邻！

2-我看不到导航栏中的导航项目。为什么？

感谢你们对我的帮助！

标签： htmlbootstrap-4

解决方案

您需要在导航栏切换器中添加data-toggle和查看https://getbootstrap.com/docs/4.0/components/navbar/data-target

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<body>
<nav class="navbar navbar-toggler-sm navbar-light  bg-success">
<div class="navbar-header">
    <button class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>

    <a href="#" class="navbar-brand" style="color: white">management</a>

    <div id="navbarNav" class="collapse navbar-collapse">
        <ul class="navbar-nav" style="color: white">
            <li class="nav-item1"><a class="nav-link active"> Dashboard</a></li>
            <li class="nav-item2"><a class="nav-link">Ads</a></li>
            <li class="nav-item3"><a class="nav-link">Users</a></li>
        </ul>
    </div>
</div>
</nav>
</body>

推荐阅读