Bootstrap，justify-content 导航栏不起作用答案

【问题标题】：Bootstrap, justify-content not working navbarBootstrap，justify-content 导航栏不起作用
【发布时间】：2020-09-01 23:23:04
【问题描述】：

<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-start">
    <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Inicio<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Servicios</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Soporte</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
    </div>
  </nav

我试图将链接栏移到右侧（而不是导航栏品牌）。我试图把“justify-content-...”这句话放在任何地方。

【问题讨论】：

标签： html css bootstrap-4 navbar justify

【解决方案1】：

您有一个 justify-content-start，我将其删除并添加了一个新类到 float 项目到 right 在移动视图中

如果这就是你要找的东西，请告诉我...

工作sn-p：

.navbar-collapse .navbar-nav .nav-item .nav-link {
  float: right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light ">
  <a class="navbar-brand" href="#"><img src="https://www.akberiqbal.com/favicon.ico"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Inicio<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Servicios</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Soporte</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contacto</a>
      </li>
    </ul>
  </div>
</nav>

【讨论】：

【解决方案2】：

从导航标签中删除 justify-content-start 并将 justify-content-end 保留在当前位置。它应该可以工作。

【讨论】：