Reactstrap泛型flex指令

Question

我正在使用Reactstrap来设计我的React/Redux应用程序的样式，但我遇到了一些问题，无法按照自己的意愿对齐；我知道我放弃了使用该库访问更细粒度的控件，但我怀疑有一种方法可以做我想做的事情。

所以，我在我的内容顶部有一个基本的导航栏(我压缩了导航选项)。

<Navbar light expand={ "lg" }>
    <NavbarBrand>Redacted Name</NavbarBrand>
    <NavbarToggler onClick={ () => this.setState({ isOpen: !this.state.isOpen }) } />
    <Collapse navbar isOpen={ this.state.isOpen }>
        <Nav navbar>
            <UncontrolledDropdown className={ "mr-lg-2" } nav inNavbar>
                <DropdownToggle nav>
                    About Us
                </DropdownToggle>
                <DropdownMenu>
                    <DropdownItem>
                        <Link to={ "/" }>Mission Statement</Link>
                    </DropdownItem>
                </DropdownMenu>
            </UncontrolledDropdown>
        </Nav>
        { userOptions }
    </Collapse>
</Navbar>

现在，userOptions是一个可以根据用户输入进行更改的表单，但是所有...它的表单采用这种基本的内联表单布局，除了内部按钮和链接的差异。

<Form className={ "userStatusForm" } inline >
    // Content
</Form>

这是我的问题:在我使用的简单布局中，品牌、切换、导航和用户表单在左侧堆叠在一起。但是，我希望折叠元素中的内容使用标准的“对齐内容之间”对齐，以将用户表单压在右侧，而不考虑其大小。也就是说，我正在努力在Reactstrap文档中找到我需要的东西--并用我试图为Google做的正确的话来表达。

Answer 1

因此，我试图避免直接的className赋值，因为我已经决定使用Reactstrap库，但最简单的事情涉及添加到Nav组件的mr-auto类，它构成了Collapse容器中的第一个项。虽然不像我希望的那样优雅，但它很简单(对于Reactstrap文档中的Navbar来说已经足够好了)。