Question

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

您能帮我吗？ Current Navbar

<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

一种简单的方法是将一些自定义CSS规则添加到navbar-brand类。（首先添加一个以导航栏品牌为中心的类，这样我们就可以为其编写css规则）

您的CSS看起来像：

  @media screen and (min-width:768px){
  .navbar-brand-centered {
    position: absolute;
    left: 50%;
    display: block;
    width: 160px;
    text-align: center;
    background-color: #eee;
    }   
 .navbar>.container .navbar-brand-centered, 
 .navbar>.container-fluid .navbar-brand-centered {
    margin-left: -80px;
    }
   }

这将使您的品牌徽标居中。现在，为了将您的其他内容（社交媒体和其他链接）推送到各自的侧面，您可以在链接中添加.navbar-left类，在“注册和登录”链接中添加.navbar-right类。

HTML：

<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 navbar-brand-centered" 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 mr-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 navbar-right">
                  <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>

bootstarp 4导航栏顺序如何更改

1 个答案: