navbar-brand 标志在折叠时会向下移动，我希望它留在左上角答案

【问题标题】：navbar-brand logo shifts down when collapsed, I would like it to stay at the top leftnavbar-brand 标志在折叠时会向下移动，我希望它留在左上角
【发布时间】：2021-05-28 05:51:40
【问题描述】：

我是 BootStrap 的新手，这是我第一次创建网站。因此，如果有任何方法可以进一步改进代码，请告诉我！

问题：所以当我折叠导航栏时，我的导航栏品牌标志会移到底部。当我缩小屏幕尺寸时，如何让徽标保留在左上角？请参考链接的图片来查看问题。

我希望徽标与我所做的导航栏重叠，如“未折叠”附加图片所示。

collapsed

not collapsed

logo

.navbar {
    max-height: 80px;
}

.navbar-brand {
    padding-top: 90px;
}

.navbar-toggler {
    position: absolute;
}

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <title>Paradise Hotel</title>
            <!-- Required meta tags -->
            <meta charset="utf-8" />
            <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
            />
            <!-- Bootstrap CSS -->
            <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous"
            />
            <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://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            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>
              <link rel="stylesheet" type="text/css" href="main.css"/>  
        </head>
        <body>

        <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
            <div class="container-fluid">

                <!-- Logo -->
                <div class="navbar-header">
                <a class="navbar-brand" href="#">
                <img class="img-fluid" src="https://i.stack.imgur.com/i60Be.jpg" alt="Brand" width="180" height="180" >
            </a>  

            <button
                class="navbar-toggler"
                type="button"
                data-toggle="collapse"  
                data-target="#navbar-menu"
            >
                <span class="navbar-toggler-icon"></span>
            </button>
            </div>  



            <!-- menu items -->
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right" >
                <li class="nav-item">
                    <a href="#" class="nav-link">Rooms</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Spa</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Casino</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Dining</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Entertainment</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Luxury Packages</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Weddings</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contact Us</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">FAQ</a>
                </li>
                </ul>
            </div>
            </nav>

            </div>

        </body>
        </html>

【问题讨论】：

你为什么不删除你的样式？没有它们它可以正常工作。 :)

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

问题是您尝试将太大的图像加载到您的nav-bar 中，然后您设置了不必要的height 和padding。只需调整图像大小以适合您的导航栏。

更改width="80" height="80" 即可。

【讨论】：