引导冲突汉堡菜单显示答案

【问题标题】：bootstrap conflict hamburger menu display引导冲突汉堡菜单显示
【发布时间】：2019-06-01 19:58:03
【问题描述】：

为什么 bootstrap 与汉堡菜单显示有冲突？

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

代码：

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>

【问题讨论】：

标签： javascript css bootstrap-4

【解决方案1】：

如果您想在菜单打开时将关闭按钮保留在左侧，则必须设置 float: none; 以防止引导程序中 close 类助手设置的默认 float: right;（更多信息 @987654321 @)。

所以在您的a 链接上，像这样申请style="float:none;"：

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

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

<a href="javascript:void(0);" onclick="closeNavbar()" class="close float-none">&#9932;</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>

【讨论】：