提问者:小点点

将按钮设置为右侧引导[复制]


我想使按钮在标题中向上,从右侧(这是默认的),到左侧。 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> 

共1个答案

匿名用户

您可以简单地使用mr-auto类,它将向左对齐,而不是ml-auto,并将您的abcddiv放在末尾,这样它将在桌面屏幕上向右对齐

null

<!-- 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>