Question

品牌在折叠时显示在切换按钮下方，而不是在没有添加图像的情况下显示在最右侧。如何让它出现在右侧（折叠时）？

<nav class="navbar navbar-expand-sm navbar-light bg-light">

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <a class="navbar-brand" href="#">
            <img src="assets/img/google-logo.png" class=""></img>
        </a>

          <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
            <ul class="navbar-nav ">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
          </div>

    </nav>

Answer 1

<ul class="navbar-nav">旁边有另一个类，你删除了它。如果您添加mr-auto，它将修复它。 <ul class="navbar-nav mr-auto">

.ml-auto和.mr-auto是margin-left auto和margin-right auto的缩写。由于BS4使用flexbox，.ml-auto会将其推向最右侧，而.mr-auto会将某些内容推到最左侧。

当然，这完全取决于徽标的大小。当它用完房间时，如果设置如此，它将进入切换。

<nav class="navbar navbar-expand-sm navbar-light bg-light">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <a class="navbar-brand" href="#">
        <img src="assets/img/google-logo.png" class="">
    </a>

      <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>

</nav>

另一个快速说明，请勿关闭<img>，这是一个自动关闭标记。如果你真的觉得有必要，你可以写它`，但是使用HTML5就没有必要这样做。

折叠时，带有img的navbar-brand出现在toggler按钮下方

1 个答案: