当浏览器较小时，Bootstrap NavBar 中的徽标将汉堡包向左移动

Question

我今天正在尝试一些事情。在 Bootstrap NavBar 中，如果徽标（navbar-brand）仅是文本，则汉堡包位于右侧。但是，如果徽标是图像，则当您调整浏览器大小时，汉堡包会向左移动。我想不通。

我目前正在学习 Angela Yu 的 Udemy 课程并完成了 Bootstrap 模块。现在尝试用我学到的东西重新创建我自己的网站。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<section id="title">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">
        <img src="img/techsnazzy-logo.png" width="30%" height="30%" alt="TechSnazzy Logo" />
      </a>
      <!-- <a class="navbar-brand" href="#">Navbar</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 class="collapse navbar-collapse id=" navbarSupportedContent>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">Home</li>
        </ul>
      </div>
    </nav>
  </div>
</section>

enter image description here

Answer 1

使用flex-nowrap 引导类到您的navbar。在此处阅读有关文档的一些信息https://getbootstrap.com/docs/4.2/utilities/flex/#wrap

来自 w3schools

flex-wrap 属性指定弹性项目是否应该 包装与否。

还要避免在徽标图像上使用宽度和高度，因为它会在徽标和导航项之间产生额外的空间，如下所示：

在.navbar-brand 上使用width: 30%，并将width: 100% 设置为徽标图像。

我更新了你的代码，请检查：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<section id="title">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap">
      <a class="navbar-brand" href="#" style="width: 30%;">
        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="TechSnazzy Logo" class="w-100" />
      </a>
      <!-- <a class="navbar-brand" href="#">Navbar</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 class="collapse navbar-collapse id=" navbarSupportedContent>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">Home</li>
        </ul>
      </div>
    </nav>
  </div>
</section>

Answer 2

切换器只是根据.navbar-brand 的宽度换行到下一行，这是预期的行为，它随后会左对齐。如果您希望切换器始终右对齐，添加类 ml-auto 似乎可以工作。

<button class="navbar-toggler ml-auto" ...

见https://getbootstrap.com/docs/4.2/utilities/flex/#auto-margins