ml-auto没有将导航栏链接推到右侧 [英] ml-auto is not pushing navbar links to the right
问题描述
我正在使用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>旁边，就像在我的应用程序中一样(不需要).这是我在看的东西:
Restrap示例(正确的间距):
我的应用程序的控制台(间距不正确):
如何在我的应用程序中正确设置间距?
我真的不清楚是什么因素影响了margin-left: auto !important在一个而不是另一个中的工作.
导航栏组件(以及许多其他组件)仅在按照设计使用方式使用时才起作用.
例如， ml-auto用于同级元素.
如果您破坏了同胞关系，那将不起作用.
换句话说，您不能仅将元素随机包装在不必要的div中.
删除放置在导航栏切换器和折叠组件周围的div，以使兄弟选择器按预期工作.
也:不要在您的任何自定义CSS中将!important标志用作永久解决方案.该标志仅用于快速测试.
P.S.您似乎习惯于将内容包装在不必要的div中. container也包裹在这样一个无用的div中.不要为某种美学"添加不必要的代码.仅在代码确实起作用的情况下才添加代码，并对其他所有内容使用注释.
I'm using reactstrap and have been following this link:
https://reactstrap.github.io/components/navbar/
In the example, the <nav className='ml-auto' navbar> is pushing the <NavItem> to the right. However, what I am trying to implement (which is really similar to the example) the <NavItem> is rendering right next to the <NavbarBrand>.
I've checked the syntax like 100 times and it looks correct. The custom CSS I have, which is very little, does not seem to be overriding anything. The CSS in the console looks pretty similar and it appears to be affected by the:
.ml-auto, .mx-auto {
margin-left: auto!important;
}
At least toggling it off in the console in the example, moves the <NavItem> right next to the <NavbarBrand> like it is in my app (which I don't want). Here is what I am looking at:
Reactstrap Example (correct spacing):
Console for my app (incorrect spacing):
How do I get the spacing right in my app?
It really isn't clear to me what is affecting margin-left: auto !important to work in one and not the other.
The navbar components (and many other components) will only work if you use them the way they've been designed to be used.
For example, ml-auto works on sibling elements.
It does NOT work if you destroy that sibling relationship.
In other words, you cannot just randomly wrap elements in unnecessary divs.
Remove the div you put around the navbar-toggler and the collapse component to make the sibling selector work as intended.
Also: Do NOT use the !important flag as a permanent solution in any of your custom css. That flag is for quick testing only.
P.S. You seem to have a habit of wrapping things in unnecessary divs. The container is also wrapped in such a useless div. Don't add unnecessary code for some sort of "esthetics". Only add code if it actually does something and use comments for everything else.
这篇关于ml-auto没有将导航栏链接推到右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
