我是新手,一般都在发展。我正在参加一个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>
编辑:非常感谢大家。这现在更有意义。
我会尽力解释它。我可能不会100%正确,但它值得一试。 mr-auto设置UL块右侧的边距。因此,当班级在那里时,它会将其下方的元素推向右侧。
这幅画中的黄色块是mr-auto所做的:dev tools image
将每个元素都视为一个块。所以UL结构是一个代码块,如果为它分配了右边距,它将推动其他块。
我希望这有帮助!
mr-auto只是一个CSS类,它将margin-right属性设置为auto。这不是导致你的按钮在右边的原因是它出现在无序列表之后“向右推”它
mr-auto
是一个实用类,有助于控制flex
项目中的对齐。默认情况下,flex
项目没有自动保证金。
导航栏标记中的行<nav class="navbar navbar-expand-lg navbar-light bg-light">
和<div class="navbar-collapse collapse" id="navbarSupportedContent" style="">
具有display
的flex
属性,这是块级项目的水平对齐方式。
实用程序类mr-auto
有助于将项目推向右侧,还有另一个类ml-auto
将项目推向左侧。
看一下官方bootstrap文档中的this插图,它将有助于你更好地理解。
“为什么这个mr-auto甚至适用于ul以外的按钮?”
这是因为Bootstrap 4 Navbar是flexbox(display:flex)。因此,Navbar的内容(品牌,导航栏折叠div和切换按钮)自然地从左到右显示,但不扩展以填充宽度。然而,navbar-collapse
已被设置为width:100%
,迫使它填充其Navbar容器的整个宽度。
在这里,我添加了背景颜色,以便你可以如何navbar-collapse
填充navbar
的宽度:
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
的左侧:
因此,如果您可视化navbar-nav
右侧的自动边距,则将按钮向右推动是有道理的。
但是:ぁzxswい
另见: https://www.codeply.com/go/oTjFSG1g29 Bootstrap 4 align navbar items to the right