Bootstrap 4导航栏了解

问题描述 投票:0回答:4

我是新手,一般都在发展。我正在参加一个webdev课程,目前通过Bootstrap学习CSS。这些视频是在bootstrap 3期间创建的,但我正在尝试学习Bootstrap 4.目前,我正在尝试理解导航栏,而我很难理解元素如何正确对齐。这主要来自bootstrap文档,除了按钮正在替换搜索元素。当我在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>

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

html css bootstrap-4 alignment navbar
4个回答
1
投票

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

这幅画中的黄色块是mr-auto所做的:dev tools image

将每个元素都视为一个块。所以UL结构是一个代码块,如果为它分配了右边距,它将推动其他块。

我希望这有帮助!


1
投票

mr-auto只是一个CSS类,它将margin-right属性设置为auto。这不是导致你的按钮在右边的原因是它出现在无序列表之后“向右推”它


0
投票

mr-auto是一个实用类,有助于控制flex项目中的对齐。默认情况下,flex项目没有自动保证金。

导航栏标记中的行<nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="navbar-collapse collapse" id="navbarSupportedContent" style="">具有displayflex属性,这是块级项目的水平对齐方式。

实用程序类mr-auto有助于将项目推向右侧,还有另一个类ml-auto将项目推向左侧。

看一下官方bootstrap文档中的this插图,它将有助于你更好地理解。


0
投票

“为什么这个mr-auto甚至适用于ul以外的按钮?”

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

在这里,我添加了背景颜色,以便你可以如何navbar-collapse填充navbar的宽度:

enter image description here

navbar-collapse也显示:flex,所以它的孩子也follow flexbox rules。你的navbar-collapse的孩子是navbar-nav ul和按钮。当auto-margins are used on flexbox孩子,被推到左,右或中心。当您将mr-auto(右侧的自动边距)添加到navbar-nav ul时,它会一直强制按钮向右移动。当它移除时,物品会自然地贴在左侧。

在这里,我已经将模糊背景颜色添加到navbar-nav,因此您可以将它如何粘贴到navbar-collapse的左侧:

enter image description here

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

但是:ぁzxswい


另见: https://www.codeply.com/go/oTjFSG1g29 Bootstrap 4 align navbar items to the right

© www.soinside.com 2019 - 2024. All rights reserved.