求问大佬，BOOTSCRAPT 制作导航栏怎么弄

最新推荐文章于 2024-10-07 09:24:46 发布

EXO_LEO

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量40

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/EXO_LEO/article/details/130479730

版权

文章内容涉及HTML代码段，主要问题是导航栏元素过于紧凑，搜索框按钮位置不正确，以及下拉菜单无法正常显示。需要对CSS样式进行调整，以实现平分布局，将搜索按钮置于搜索框右侧，并解决下拉菜单的显示问题。

摘要由CSDN通过智能技术生成

<body>
<nav class="navbar navbar-static-top bg-info " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">首页</a>
</div>
<div>
<ul class="nav nav-pills ">
<li class="dropdown">
<a href="#" class="dropdown-toggle text-dark" data-toggle="dropdown">
公告信息<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a class="text-dark" href="#">防疫小课堂</a></li>
<li><a class="text-dark" href="#">疫情动态</a></li>
<li><a class="text-dark" href="#">疫情趋势</a></li>
<li class="divider"></li>
<li><a class="text-dark" href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a class="text-dark" href="#">另一个分离的链接</a></li>
</ul>
</li>
<li class="active"><a class="text-dark" href="#">物资信息</a></li>
<li><a class="text-dark" href="#">单位信息</a></li>
<li><a class="text-dark" href="#">后台系统</a></li>
<li class="active"><a class="text-dark" href="#">人员信息</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle text-dark" data-toggle="dropdown">
工作类型<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a class="text-dark" href="#">志愿者</a></li>
<li><a class="text-dark" href="#">拭子检测</a></li>
<li><a class="text-dark" href="#">秩序维护</a></li>
<li><a class="text-dark" href="#">物资发放</a></li>
</ul>
</li>
</ul>
</div>
<form class=" navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
</nav>