在右侧制作按钮 Bootstrap

Question

我想在 header 中从右侧（默认设置）到左侧制作按钮。 Abcd 到右侧。以及所有 A1 、 A2 、 A3 、 A4 、 A5 到左侧。

我的代码是：-

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
     <div class="container">
       <a class="navbar-brand" href="index.php">Abcd</a> 
       <div class= "collapse navbar-collapse" id="ftco-nav"  >
         <ul class="navbar-nav ml-auto " >
           <li class="nav-item active"  ><a href="index.php" class="nav-link" >  A1 </a></li> 
           <li class="nav-item"><a href="services.php" class="nav-link"> A2 </a></li>
           <li class="nav-item"><a href="about.php" class="nav-link"> A3 </a></li>
           <li class="nav-item"><a href="contact.php" class="nav-link"> A4 </a></li>
           <li class="nav-item"><a href="admin/index.php" class="nav-link">A5</a></li>
         </ul>
       </div>
     </div>
   </nav>

Answer 1

你可以简单地使用 mr-auto class 它会向左对齐，而不是 ml-auto 并将你的 abcd div 放在最后所以它将在桌面屏幕上右对齐

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
  <div class="container">


    <div class="collapse navbar-collapse" id="ftco-nav">
    
        <!-- mr-auto class so it will treated as left -->
      <ul class="navbar-nav mr-auto ">
      
        <li class="nav-item active"><a href="index.php" class="nav-link">  A1 </a></li>
        <li class="nav-item"><a href="services.php" class="nav-link"> A2 </a></li>

        <li class="nav-item"><a href="about.php" class="nav-link"> A3 </a></li>

        <li class="nav-item"><a href="contact.php" class="nav-link"> A4 </a></li>

        <li class="nav-item"><a href="admin/index.php" class="nav-link">A5</a></li>
      </ul>
    </div>
    
    <!-- LOGO AT THE END SO IT WILL BE AT RIGHT -->
    <a class="navbar-brand" href="index.php">Abcd</a>
  </div>
</nav>

在右侧制作按钮 Bootstrap

Make buttons to right side Bootstrap

html

bootstrap-modal

bootstrap-4