Question

所以我试图获得与此处所见相同的导航栏：LINK

当我开始这样做的时候，它看起来非常简单，就像5-10分钟的工作一样，但对初学者来说似乎不可能。最大的问题是这种移动响应能力。但如果有人可以帮助我创建完全相同的导航栏，我会非常高兴。

我已经尝试了大约2-3个小时，但没有比这更好：Codepen

任何可能的解决方案都会受到赞赏，如果出现问题，请给我反馈意见，所以我可以放弃请不要投票，谢谢。我的代码：

HTML

    <nav class="navbar navbar-expand-lg navbar-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>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <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="https://www.upload.ee/image/8361734/OdysseyLogo.png"></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>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

和CSS

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

@media (min-width: 992px) {
    .navbar-expand-lg {
        position: fixed !important;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
    }
}

Bootstrap 4导航栏，带有中心导航品牌标识

0 个答案: