html - 尝试通过此导航菜单适应插入符号
问题描述
https://jsfiddle.net/alachgar/L0bxjncz/3/
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<a href="#mobileMenu" id="mobileBar" class="d-none ml-auto"> <i class=" "></i></a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-md-auto justify-content-end" id="nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only"></span></a>
</li>
<li class="nav-item dd">
<a class="nav-link" href="#">Justice Server <span class="sr-only"></span></a>
</li>
<li class="nav-item dd">
<a class="nav-link" href="#">Westlaw <span class="sr-only"> </span></a>
</li>
<li>
<a class="nav-link dropdown-toggle" data-toggle = "dropdown" href = "#">LSNC SPN <span class = "caret sr-only"></span></a>
<ul class="dropdown-menu">
<?php
$conn = new mysqli('localhost', '.....', '.......', 'portal') or die("Database Connection Failed");
//Below We are connectin to Database and getting all items for our Menu.
$sql = "SELECT * FROM categories";
$res = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($res))
{
echo "<li class='dropdown-item'><a href='$base_url/admin/downloads.php?idx={$row['cat_code']}'><span >{$row['cat_name']}<span></a></li>";
}
?>
</ul>
</li>
<li class="nav-item dd">
<a class="nav-link" href="#"> LSNC Sites <span class="sr-only"> </span></a>
<ul class="list-unstyled dropdownMenu">
<li>
<a href="#"> LSNC Web</a>
</li>
<li>
<a href="#"> Calfresh</a>
</li>
<li>
<a href="#"> Regulations</a>
</li>
<li>
<a href="#"> Cases</a>
</li>
</ul>
</li>
<li class="nav-item dd">
<a class="nav-link" href="#"> Pika <span class="sr-only"></span></a>
</li>
<li class="nav-item dd">
<a class="nav-link" href="#">Your JS Cases <span class="sr-only"></span></a>
</li>
<li class="nav-item dd">
<a class="nav-link" href="#">Events <span class="sr-only"></span></a>
</li>
<li class="nav-item dd">
<a class="nav-link" href="logout.php">Logout <span class="sr-only"></span></a>
</li>
</ul>
</div>
</nav>
</div>
</header>
我试图用这个导航栏适应下拉菜单,所有项目都很好,除了当我从 MySql 表中查询项目时,结果移到最左边,我希望项目显示在主下拉菜单 (LSNC SPN) 下方。我尝试了各种组合都没有运气。感谢您的每一次帮助。谢谢你。
解决方案
我看到了您的代码,在我看来,您所做的一切都是正确的,只是您没有将“nav-item”类添加到“下拉菜单”的父“li”标签中。
推荐阅读
- carla - 卡拉刺激器上的 WinError 10061
- javascript - A2 服务器子文件夹中的 VueJs 部署问题
- flutter - Dart/Flutter linter 规则:索引地图的类型应该是地图的关键类型?
- java - 有没有办法在 Java 中设置默认参数?
- java - 如何在 Groovy 中创建动态长度的 Json 数组
- azure - “请求中指定的回复 URL 与为应用程序配置的回复 URL 不匹配”即使添加了 URL
- c++ - 双指针可以用作二维数组吗
- eventstoredb - EventStore.Client.Grpc.Streams 导致 LINQ 查询出现问题,例如 Where、FirstOrDefault
- java - 您好,我在 Eclipse 中用于 Selenium 测试的代码有问题
- asp.net-core-3.1 - 如何从 Utils 类的 GetValue 方法传递 Ilogger 引用