ml-auto 没有将导航栏链接推到右边 [英] ml-auto is not pushing navbar links to the right

问题描述

我正在使用 reactstrap 并且一直在关注这个链接:

我的应用的控制台(不正确的间距):

如何在我的应用中获得正确的间距?

我真的不清楚是什么影响了 margin-left: auto !important 在一个而不是另一个中工作.

解决方案

导航栏组件(和许多其他组件)只有在您按照设计使用的方式使用它们时才能工作.

例如，ml-auto 适用于同级元素.

如果你破坏了这种兄弟关系，它就不起作用.

换句话说，您不能随意地将元素包装在不必要的 div 中.

删除您放置在导航栏切换器和折叠组件周围的 div，以使同级选择器按预期工作.

另外:不要在任何自定义 css 中使用 !important 标志作为永久解决方案.该标志仅用于快速测试.

附言您似乎习惯将东西包装在不必要的 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屋！