Bootstrap 4 导航栏理解

Question

我对此并不陌生，并且总体上正在发展。我正在学习 webdev 课程，目前正在通过 Bootstrap 学习 CSS。这些视频是在 bootstrap 3 期间创建的，但我正在尝试在 Bootstrap 4 上学习。目前，我正在尝试理解导航栏，但我很难理解元素如何正确对齐。这主要来自引导文档，除了按钮正在替换搜索元素。我知道当我在 ul 标签中取消 mr-auto 时，按钮不再正确对齐。为什么这个 mr-auto 甚至适用于 ul 之外的按钮？我认为这个答案将有助于弥合我的许多理解方面的差距。提前感谢您的帮助。

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <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>
    <button>Click</button>
  </div>
</nav>

编辑：非常感谢大家。现在这更有意义了。

Answer 1

我将尽我所能解释它。我可能不会 100% 正确，但值得一试。 mr-auto 设置 UL 块右侧的边距。因此，当类存在时，它将其下方的元素向右推。

这张图片中的黄色块是mr-auto所做的： dev tools image

将每个元素视为一个块。所以 UL 结构是一个代码块，如果它被分配到右边距，它将把其他块推过去。

我希望这会有所帮助！

Answer 2

mr-auto 只是一个 CSS 类，它将元素的 margin-right 属性设置为 auto。这不是导致您的按钮位于右侧的原因，而是它位于将其“推”到右侧的无序列表之后

Answer 3

mr-auto 是一个实用程序类，可帮助控制flex 项目中的对齐方式。默认情况下，flex 项目没有自动边距。

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 和 导航栏标记中的<div class="navbar-collapse collapse" id="navbarSupportedContent" style=""> 具有flex 的display 属性，这是水平对齐块级项目的原因。

实用程序类mr-auto 帮助将项目推到右侧，还有另一个类ml-auto 将项目推到左侧。

看看官方引导文档中的this 插图，它会帮助你更好地理解。

Answer 4

“这个mr-auto怎么也适用于ul之外的按钮？”

这是因为 Bootstrap 4 Navbar 是 flexbox (display:flex)。因此导航栏的内容（品牌、导航栏折叠 div 和切换按钮）自然地从左到右显示，但不要扩展以填充宽度。但是，navbar-collapse 已设置为 width:100%，这会强制它填充其导航栏容器的整个宽度。

在这里我添加了背景颜色，以便您了解navbar-collapse 如何填充navbar 的宽度：

navbar-collapse 也是 display:flex，所以它也是孩子 follow flexbox rules。你的navbar-collapse 的孩子是navbar-nav ul 和按钮。当auto-margins are used on flexbox 孩子时， 被推到左边、右边或中间。当您将mr-auto（右侧的自动边距）添加到navbar-nav ul 时，它会强制按钮一直向右。当它移除时，物品会回到自然粘在左侧。

在这里，我将模糊背景颜色添加到 navbar-nav，这样您就可以知道它如何贴在 navbar-collapse 的左侧：

因此，如果您将navbar-nav 右侧的自动边距可视化，则将按钮向右推是有意义的。

演示：https://www.codeply.com/go/oTjFSG1g29

---

另见：
Bootstrap 4 align navbar items to the right
Bootstrap NavBar with left, center or right aligned items