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>

这是我的问题：在我使用的简单布局中，品牌、切换、导航和用户表单在左侧彼此相对。但是，我希望 Collapse 元素内的内容使用标准 "justify content between" 对齐方式将用户表单按在右侧，而不管其大小如何。也就是说，我正在努力在 Reactstrap 文档中找到我需要的东西 - 并说明我正在为 Google.

尝试正确做的事情

Answer 1

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

Reactstrap 通用 flex 指令

Reactstrap generic flex directives

reactjs

bootstrap-4

reactstrap