Question

即使我已将“navbar-right”类添加到ul标记，我的导航栏项也未对齐。我做错了什么？

<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark justify-content-between">
<div class="container">

        <div class="navbar-header">    
    <a class="navbar-brand" href="#"><strong>My Name</strong></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
          </button></div>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="nav navbar-nav navbar-right">
      <li class="nav-item">
        <a class="nav-link" href="#">About 
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div></div>
</nav>

https://codepen.io/wongwy/pen/VMQgeJ

Answer 1

在打开div标记后，不要将container与nav类同时使用，navbar的内容将与右侧对齐。

要将ul的内容与右侧对齐，请使用ml-auto

https://codepen.io/anon/pen/eGMdyv

Bootstrap Navbar左侧有徽标，右侧有项目

1 个答案: