javascript - 菜单使用引导程序在移动版本中下推图像?
问题描述
这是导航栏的桌面版
这是单击汉堡按钮后屏幕尺寸变为移动版本时的图像
我希望当我单击汉堡包以打开菜单但如果它没有被按下,它将在图像上打开。
.navbar-light .navbar-toggler {
outline: none !important;
padding-top: 8px;
padding-bottom: 2px;
z-index: 1001;
}
.navbar-toggler .navbar-toggler-icon {
background-color: black;
color: black;
height: 3px;
display: block;
margin-bottom: 6px;
}
<div class="container-fluid wow fadeIn">
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a class="navbar-brand wow fadeInLeft" href="#"><img src="img/logo.png" alt="logo" width="160px" height="60px"></a>
<button aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto wow fadeInRight">
<li class="nav-item active">
<a class="nav-link" href="#"><strong>HOME </strong><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>ABOUT</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>SERVICES</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>PORTFOLIO</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>CONTACT US</strong></a>
</li>
</ul>
</div>
</nav>
</div>
<header id="home-section" class="mb-3">
<img src="img/banner.jpg" alt="" width="100%">
</header>
我在哪里做错了?需要添加哪个 css 属性或引导类?
解决方案
您可以使用.navbar-fixed-top
课程将其固定在移动设备上
推荐阅读
- javascript - 总是先得到”钩子在测试中并且无法修复它
- javascript - 同步代码中不会发生变化检测
- python-3.x - Pandas Merge 返回空数据框
- angular - nativescript 如何自动处理基于会话的 api?
- c++ - 如何使用 OpenCV 用粗略的水平线细化图像?
- swift - 从 URL 下载并将其设置为 GMSMarker 后如何修复闪烁的图像?
- ibm-cloud - 如何在 IBM Watson Assistant 中插入复选框?
- amazon-mws - GetUniquePackageLabels 不使用来自 _POST_FBA_INBOUND_CARTON_CONTENTS_ 的 CartonId
- scala - Flink:RichSinkFunction 的实现不可序列化
- php - 数据库值未显示在列表视图中