引导冲突汉堡菜单显示

为什么引导程序与汉堡菜单显示冲突？

汉堡菜单打开和关闭按钮在左侧，但是当我添加引导 css 行时，汉堡包关闭按钮浮动到右侧位置！当我删除那行时，这是OKokey。我应该如何解决这个问题？

法典：

function openNavbar () {
	document.querySelector("#navbar").style.width="100%";
	document.querySelectorAll(".open")[0].style.opacity = 0;
}
function closeNavbar () {
	document.querySelector("#navbar").style.width="0";
	document.querySelectorAll(".open")[0].style.opacity = 1;
}

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html,body{
	width: 100%;
	height: 100%;
	background: url("https://images.pexels.com/photos/1096658/pexels-photo-1096658.jpeg?auto=compress&cs=tinysrgb&h=650&w=940") center/cover no-repeat;
	font: bold 1rem Consolas;
}
.open, .close{
	display: inline-block;
	padding:30px 0 0 30px;
	cursor: pointer;
	font-size:2rem;
	color:#fff;
	text-decoration: none;
	transition: .5s;
}
.overlay{
	position: fixed;
	width: 0;
	top: 0;
	background-color: #333;
	opacity: .7;
	overflow-x: hidden;
	height: 100%;
	transition: .5s;
}
.overlay-content{
	text-align: center;
	position: relative;
	width: 100%;
	padding-top: 50px;
	margin-top: 30px;
}
.overlay-content a {
	font-size: 2rem;
	color:#fff;
	display: block;
	padding:10px;
	margin-bottom: 4px;
	text-decoration: none;
	transition: .3s;
	position: relative;
}
.overlay-content a:after{
	content: "";
	position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    transform: translateX(-50%);
    height: 3px;
    background:#fff;
    transition: .3s;
    display: block;
}
.overlay-content a:hover{
	color:#ff9f1a;
}
.overlay-content a:hover:after{
	width: 25%;
}

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
        <span class="open" onclick="openNavbar()">&#9776; Menu</span>
        <div id="navbar" class="overlay">
        <a href="javascript:void(0);" onclick="closeNavbar()" class="close">&#9932;</a>
        <div class="overlay-content">
        <a href="javascript:void(o);">Home</a>
        <a href="javascript:void(o);">Portfolio</a>
        <a href="javascript:void(o);">Services</a>
        <a href="javascript:void(o);">About</a>
        <a href="javascript:void(o);">Contact</a>
        </div>
        </div>
</body>

如果要在

菜单打开时将关闭按钮保留在左侧，则必须设置float: none;以防止close类帮助程序设置的默认float: right;引导(更多信息在这里(。

因此，在您的a链接中，像这样应用style="float:none;"：

<a style="float:none;" href="javascript:void(0);" onclick="closeNavbar()" class="close">⛌</a>

或者你可以像这样使用引导程序的float-none助手：

<a href="javascript:void(0);" onclick="closeNavbar()" class="close float-none">⛌</a>，关闭按钮将保留在左侧。

以下示例：

function openNavbar () {
	document.querySelector("#navbar").style.width="100%";
	document.querySelectorAll(".open")[0].style.opacity = 0;
}
function closeNavbar () {
	document.querySelector("#navbar").style.width="0";
	document.querySelectorAll(".open")[0].style.opacity = 1;
}

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html,body{
	width: 100%;
	height: 100%;
	background: url("https://images.pexels.com/photos/1096658/pexels-photo-1096658.jpeg?auto=compress&cs=tinysrgb&h=650&w=940") center/cover no-repeat;
	font: bold 1rem Consolas;
}
.open, .close{
	display: inline-block;
	padding:30px 0 0 30px;
	cursor: pointer;
	font-size:2rem;
	color:#fff;
	text-decoration: none;
	transition: .5s;
}
.overlay{
	position: fixed;
	width: 0;
	top: 0;
	background-color: #333;
	opacity: .7;
	overflow-x: hidden;
	height: 100%;
	transition: .5s;
}
.overlay-content{
	text-align: center;
	position: relative;
	width: 100%;
	padding-top: 50px;
	margin-top: 30px;
}
.overlay-content a {
	font-size: 2rem;
	color:#fff;
	display: block;
	padding:10px;
	margin-bottom: 4px;
	text-decoration: none;
	transition: .3s;
	position: relative;
}
.overlay-content a:after{
	content: "";
	position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    transform: translateX(-50%);
    height: 3px;
    background:#fff;
    transition: .3s;
    display: block;
}
.overlay-content a:hover{
	color:#ff9f1a;
}
.overlay-content a:hover:after{
	width: 25%;
}

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
        <span class="open" onclick="openNavbar()">&#9776; Menu</span>
        <div id="navbar" class="overlay">
        <a style="float:none;" href="javascript:void(0);" onclick="closeNavbar()" class="close">&#9932;</a>
        <div class="overlay-content">
        <a href="javascript:void(o);">Home</a>
        <a href="javascript:void(o);">Portfolio</a>
        <a href="javascript:void(o);">Services</a>
        <a href="javascript:void(o);">About</a>
        <a href="javascript:void(o);">Contact</a>
        </div>
        </div>
</body>

相关内容

最新更新

热门标签：