我正在使用 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
在一个地方能工作而在另一个地方则无法工作。
navbar-toggler
和.navbar-collapse
从div
元素中解除包裹……看起来您在navbar-brand
后面使用了额外的div
元素。请注意,不要改变原文意思,尽可能使翻译语言通俗易懂。 - Bhuwan