Question

我正在尝试将导航项目（所有社交媒体图标之后的所有内容）对齐到屏幕右侧。我已经尝试了几个修复程序，但似乎无法解决！

有人可以告诉我我要去哪里错吗？

非常感谢您的帮助

armeabi-v7a

Answer 1

有关更改的详细信息，请参见代码段中的注释。我已经关闭了一个<div>和大多数<li>标签。我在justify-content-end类collapse中添加了<div>类，以使导航项向右对齐。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


<nav id="mainnavbar" class="navbar navbar-dark navbar-expand-md py-2 fixed-top bg-dark">  <!-- Add bg-dark -->
  <img src="BGDlogo.png" width="32" height="32" alt="" loading="lazy">
  <a href="#" class="navbar-brand" py-2>BLUE GECKO DIGITAL</a>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-linkedin"></a>
  <a href="#" class="fa fa-instagram"></a>
  <div class="d-flex flex-row order-3 order-sm-3">
    <ul class="navbar-nav flex-row">

    </ul>
  </div>  <!-- close the div here -->
  <button class="navbar-toggler" data-toggle="collapse" data-target="#navlinks" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span>
</button>
  <div class="collapse navbar-collapse justify-content-end" id="navlinks"> <!-- Add justify-content-end here -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link">HOME</a></li> <!--Close <li> -->
        <li class="nav-item">
          <a href="#" class="nav-link">DESIGN</a></li> <!--Close <li> -->
          <li class="nav-item">
            <a href="#" class="nav-link">SEARCH</a></li> <!--Close <li> -->
            <li class="nav-item">
              <a href="#" class="nav-link">SOCIAL</a></li> <!--Close <li> -->
              <li class="nav-item">
                <a href="#" class="nav-link">BRAND</a></li> <!--Close <li> -->
                <li class="nav-item">
                  <a href="" class="nav-link">BLOG</a></li> <!--Close <li> -->
                  <li class="nav-item">
                    <a href="#" class="nav-link">CONTACT</a>
                  </li>
    </ul>

  </div>
</nav>

Bootstrap 4将导航项向右对齐

1 个答案: