html - navbar 小于 navbar-brand

Question

我正在寻找一种方法来拥有比导航栏本身的高度更大的导航栏品牌（bootstrap 4）。所以导航栏品牌应该与导航栏重叠。目前似乎增加了导航栏高度以适应导航栏品牌。

我的 HTML 看起来像：

    <nav class="navbar navbar-expand-lg navbar-custom fixed-top top-menu-4">
    <div class="container">
        <div class="navbar-brand">
            <img src="https://via.placeholder.com/350x170.png" width="350px" height="170px" alt="">
        </div>
        <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
            aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 3</a>
                </li>
            </ul>
        </div>

    </div>
</nav>

所以我想要的是类似重叠的东西：

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 1

您应该在图像上应用绝对位置。

.navbar-brand img {
    position: absolute;
    top: 10px;
    left: 30px;
    max-height: 100px;
    object-fit: contain;
}