我想使按钮在标题中向上,从右侧(这是默认的),到左侧。 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>
您可以简单地使用mr-auto
类,它将向左对齐,而不是ml-auto
,并将您的abcd
div
放在末尾,这样它将在桌面屏幕上向右对齐
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>