为什么bootstrap和汉堡菜单显示有冲突？
汉堡菜单打开和关闭按钮在左侧，但是当我添加 bootstrap css 行时，汉堡菜单关闭按钮 float 到右侧位置! 当我删除该行时就可以了。 我应该如何解决这个问题？
代码:
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()">☰ Menu</span>
<div id="navbar" class="overlay">
<a href="javascript:void(0);" onclick="closeNavbar()" class="close">⛌</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;防止默认 float: right;由 close 设置来自 Bootstrap 的类助手(更多信息 here)。
所以在你的 a链接，申请style="float:none;"像这样:
<a style="float:none;" href="javascript:void(0);" onclick="closeNavbar()" class="close">⛌</a>
或者您可以使用 Bootstrap 的 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()">☰ Menu</span>
<div id="navbar" class="overlay">
<a style="float:none;" href="javascript:void(0);" onclick="closeNavbar()" class="close">⛌</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 - 引导冲突汉堡菜单显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56406285/