我目前正在学习 html、css、bootstrap(以及很快的 js),也许你可以帮助我完成一些我很难做到的事情:
我用引导程序制作了一个导航栏,它具有响应性并在较小的屏幕上折叠。
普通视图:https://i.stack.imgur.com/96crH.png 折叠视图:https://i.stack.imgur.com/cvp4T.png
当导航栏折叠时它看起来不错,但是当我单击切换器并展开项目时,我希望“注销”按钮保留在切换器图标旁边最右侧的顶行中,或者至少出现在其他项目下方的右侧(目前它向左移动)
扩展视图 https://i.stack.imgur.com/KuQkp.png
谁能帮我怎么做?
这是一些代码:
html {
box-sizing: border-box;
}
body {
background-color: rgb(255, 255, 255);
font-family: 'Raleway', sans-serif;
margin:0
}
#logo {
width: 1em;
padding-bottom: 0.3em;
}
.navbar {
margin-bottom: 5px;
}
.navbar-collapse {
padding-right: 15px;
}
.navbar-toggler-icon {
width: 1em;
height: 1em
}
.nav-link{
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PocketMoney</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="projektapp.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,600;1,300;1,600&display=swap"
rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark" style='background-color: rgb(4, 85, 85)'>
<a class=" navbar-brand active" href="#"><span class="sr-only">(current)</span>
<img id="logo" src="wallet.png" alt="">
Brand
</a>
<button class="navbar-toggler ml-auto mr-2" type="button" data-toggle="collapse" data-target="#navbar-content"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbar-content">
<div class="navbar-nav">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Something else</a>
<a class="nav-link" href="#">About</a>
</div>
</div>
<div id="bt-logout">
<button type="button" class="btn btn-sm btn-dark">Logout</button>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
答案 0 :(得分:0)
当您单击汉堡包时,注销按钮会关闭,因为导航栏属性更改以阻止这就是造成一些问题的原因。只是无法提供整个问题的简介。
但我得到了你。只需添加此 css 和您的文件。
.navbar-collapse {
position: absolute;
left: 0;
right: 0;
top: -100%;
background: #045555;
transition: all 0.3s;
z-index: -2;
display: block!important;
visibility: hidden;
opacity: 0;
}
.navbar-collapse.show {
top: 100%;
visibility: visible;
opacity: 1;
}