html - Bootstrap 图标正在向下移动切换器导航栏
问题描述
我在这里有我的引导导航,其中切换器上有一个图标。见下图。
正如您在帮助按钮和用户图标上方的图像中看到的那样,我需要将图标放在移动视图上的移动切换器图标旁边,如下所示:
目前这里是我的 HTML:
<nav class="navbar navbar-expand-md navbar-light navbar-right">
<a class="navbar-brand logo" href="#">Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
</ul>
<ul class="nav justify-content-md-end">
<li class="nav-item">
<a class="nav-link btn btn-primary" href="#">Help</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user fa-lg"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
您可以在此处查看实际的 jsfiddle:https ://jsfiddle.net/9gcqu7zj/1/
如何像上图一样在移动视图上移动导航栏切换器旁边的右侧图标,并使帮助链接按钮就像导航栏上的普通链接一样?
解决方案
他们之所以会发生这种情况,是因为您已将用户图标包含在<div class="collapse navbar-collapse" id="navbarSupportedContent">
类中,当屏幕变小时,该类会自动折叠其中的所有内容。你需要做的是像我在下面所做的那样从类中取出图标,这样当屏幕变小时它就不会崩溃
(抱歉我的格式不好,但我只是想解释一下我的意思。)
<nav class="navbar navbar-expand-md navbar-light navbar-right">
<a class="navbar-brand logo" href="#">Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
</ul>
<ul class="nav justify-content-md-end">
<li class="nav-item">
<a class="nav-link btn btn-primary" href="#">Help</a>
</li>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
<ul>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user fa-lg"></i>
</a>
</li>
</ul>
</nav>
推荐阅读
- python - 如何将网络抓取数据的某些部分逐个单元格写入 Excel?
- reactjs - 在 React 中调整样式组件容器的大小时,Mapbox GL JS 控件离开地图
- asp.net-mvc - Url.Content 未在剃刀视图中显示图像
- swift - 将 UIPercentDrivenInteractiveTransition 与 CABasicAnimation 一起使用会出现奇怪的故障
- android - 为什么我的应用程序总是在系统托盘的推送通知显示中显示默认图标?
- python - hashlib 中的 Sha 256 函数返回 NoneType
- coldfusion - 如何在 ColdFusion 中保持选择下拉选项
- c# - 在编译 Xamarin.Forms 项目时修复“VerifyVersionsTask”错误
- pdflib - PDFlib - 控制文本颜色、文本背景和文本笔划的背景和不透明度
- asp.net-mvc-5 - ELMAH_Error 表中记录的错误未显示在 elmah.axd 页面上