【问题标题】：Make buttons to right side Bootstrap [duplicate]在 Bootstrap 右侧制作按钮 [重复]
【发布时间】：2020-10-13 14:30:41
【问题描述】：
我想在标题中制作按钮，从右侧（这是默认设置）到左侧。 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>
【问题讨论】：
标签：
html
bootstrap-4
bootstrap-modal
【解决方案1】：
您只需使用 mr-auto 类，它将与左侧对齐，而不是 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>