html - 在扩展的切换引导导航栏中对齐项目

问题描述

我目前正在学习 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>

标签： htmlcssbuttonbootstrap-4navbar

.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; }

html - 在扩展的切换引导导航栏中对齐项目

问题描述

解决方案

推荐阅读