html - Bootstrap 导航栏徽标覆盖

Question

我在引导程序中有一个导航栏，中间有链接和徽标。导航栏拉伸以适合徽标图像，我宁愿让徽标与导航栏重叠。这是我的代码，我实际上使用了某人已经制作的基础，但它仍然无法正常工作。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <a class="mx-auto" href="#">
            <img src="http://placehold.it/120/ccff00" class="rounded-circle" height="120" width="120">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

CSS

@media (min-width: 992px) {
    .navbar {
        height:50px;
    }
}

标签： htmlcsstwitter-bootstrapnavbar