Question

我今天在尝试一些东西。在Bootstrap NavBar中，如果徽标（navbar品牌）仅为文本，则汉堡包将停留在右侧。但是，如果徽标是图像，则在调整浏览器大小时，汉堡包将向左移动。我想不通。

我目前正在研究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

基于.navbar-brand的宽度，切换器仅被换行到下一行，因此这是预期的行为，然后将其左对齐。如果您希望切换开关始终保持右对齐，则添加类ml-auto似乎可以正常工作。

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

请参见https://stats.stackexchange.com/questions/71187/getting-a-second-order-polynomial-trend-line-from-a-set-of-data

Answer 2

对您的flex-nowrap使用navbar引导类。在https://getbootstrap.com/docs/4.2/utilities/flex/#wrap

上阅读有关文档的一些信息。

来自 w3学校

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

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

改为在width: 30%上使用.navbar-brand并将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>

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

2 个答案: