如何将引导导航条徽标的顺序从左更改为中心

Question

我需要询问如何更改Bootstrap 4导航栏的顺序，因为当前徽标位于左侧，但我希望它位于中间，并且两侧都具有菜单。可以帮助我如何更改此订单？

请检查当前导航栏图像

<nav class="navbar navbar-light navbar-expand-lg sticky-top navigation-clean" data-aos="fade-down" data-aos-once="true" style="background-color:rgb(16,34,55);" data-toggle="affix">
    <div class="container-fluid">
        <a class="navbar-brand" href="#"> <img src="assets/img/logo.svg" class="largeLogo" id="Logo"></a>
        <!-- links toggle -->
    <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navcol-1" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fa fa-bars" style="color: #FFC000"></i>
        </button>
    <!-- account toggle -->
    <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fa fa-user" style="color: #FFC000"></i>
    </button>



            <div class="collapse navbar-collapse " id="navcol-1">
                <ul class="nav navbar-nav align-items-center ml-auto">
                    <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-home" style="width:18px;"></i>Home</a></li>
                    <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#cor"><i class="fa fa-book" style="width:18px;"></i>Courses</a></li>
                    <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-user" style="width:18px;"></i>About Us</a></li>
                    <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-star" style="width:18px;"></i>Contact Us</a></li>
                    <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-facebook-square" style="width:18px;"></i></a></li>
                    <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-twitter-square" style="width:18px;"></i></a></li>
                    <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="icon ion-social-googleplus" style="width:18px;"></i></a></li>
                </ul>
            </div>
        <div class="collapse navbar-collapse" id="account">
        <ul class="navbar-nav ml-auto align-items-end">
            <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
        </ul>
    </div>



    </div>
</nav>

Answer 1

您应该多搜索一点，因为这是常见问题

 .navbar {
        position: relative;
    }
    .navbar-brand {
        position: absolute;
        left: 50%;
        margin-left: -50px !important;  /* 50% of your logo width */
        display: block;
    }