ml-auto没有将导航栏链接推向右侧
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ml-auto没有将导航栏链接推向右侧相关的知识,希望对你有一定的参考价值。
我正在使用reactstrap
并且一直关注此链接:
https://reactstrap.github.io/components/navbar/
在这个例子中,<nav className='ml-auto' navbar>
正在推动<NavItem>
向右。然而,我正在尝试实现(这与示例非常相似)<NavItem>
正在<NavbarBrand>
旁边呈现。
我已经检查了100次语法,看起来是正确的。我拥有的自定义CSS,它很少,似乎没有覆盖任何东西。控制台中的CSS看起来非常相似,它似乎受到以下因素的影响:
.ml-auto, .mx-auto {
margin-left: auto!important;
}
至少在示例中在控制台中切换它,将<NavItem>
移动到<NavbarBrand>
旁边,就像它在我的应用程序中一样(我不想要)。以下是我要看的内容:
Reactstrap示例(正确的间距):
如何在我的应用程序中获得正确的间距?
我真的不清楚是什么影响margin-left: auto !important
在一个而不是另一个工作。
导航栏组件(以及许多其他组件)仅在您按照设计使用方式使用时才有效。
例如,ml-auto
适用于兄弟元素。
如果你破坏了这种兄弟关系,它就行不通。
换句话说,你不能随意将元素包装在不必要的div中。
删除围绕导航栏切换器和折叠组件放置的div,以使兄弟选择器按预期工作。
另外:请勿在任何自定义CSS中使用!important
标志作为永久解决方案。该标志仅用于快速测试。
附:你似乎习惯将事物包装在不必要的div中。 container
也包裹在这样一个无用的div中。不要为某种“美学”添加不必要的代码。只有在实际执行某些操作时添加代码并对其他所有内容使用注释。
关于ml-auto
如何工作的解释。
看来这已在评论中得到解决。我只想添加ml-auto
无效的解释,因为它的flexbox父级需要是导航栏的全宽。所以,它也可以通过添加w-100
到额外的div来解决..
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a class="navbar-brand" href="#">reactstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="w-100">
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
...
</ul>
</div>
</div>
</nav>
ml-auto
的工作原理是因为flexbox父级默认“缩小”子块元素的方式。它与兄弟元素无关,并且在flexbox父级中只有一个孩子可以正常工作:https://www.codeply.com/go/xPaoNJMzbG
这是一个good article on how auto-margins work with flexbox
以上是关于ml-auto没有将导航栏链接推向右侧的主要内容,如果未能解决你的问题,请参考以下文章