Reactstrap generi c flex директивы - PullRequest
Новая
       34

Reactstrap generi c flex директивы

1 голос
/ 23 января 2020

Я использую Reactstrap для стилизации своего приложения React / Redux, и у меня возникают некоторые проблемы с выравниванием по своему желанию; Я знаю, что отказываюсь от легкого доступа к более детальному управлению с помощью библиотеки, но я подозреваю, что есть способ сделать то, что я хочу.

Итак, у меня есть базовый c Navbar вверху мой контент (я сжал опции Nav). 

<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 - это форма, которая изменяется в зависимости от пользовательского ввода, но все ... ее формы принимают эту базовую c встроенную форму макет, за исключением различий в кнопках и ссылках внутри. 

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

Вот моя проблема: в используемом мной простом макете марка, переключатель, навигация и пользовательская форма расположены друг против друга слева , Однако я хочу, чтобы содержимое внутри элемента Collapse использовало стандартное выравнивание «выравнивать содержимое между», чтобы прижимать пользовательскую форму к правой стороне, независимо от ее размера. Тем не менее, я изо всех сил пытаюсь найти то, что мне нужно в документах Reactstrap - и сформулировать то, что я пытаюсь сделать правильно для Google.

1 Ответ

0 голосов
/ 23 января 2020

Итак, я пытался избежать прямых className назначений, поскольку я уже решил использовать библиотеку Reactstrap, но самое простое - это класс mr-auto, добавленный к компоненту Nav, который формирует первое Товар внутри Collapse контейнера. Не так элегантно, как я надеялся, но все просто (и было достаточно для Navbar в документах Reactstrap).

...