React Bootstrap - Как мне выровнять несколько навигации внутри гибкой панели навигации? - PullRequest
Новая
       34

React Bootstrap - Как мне выровнять несколько навигации внутри гибкой панели навигации?

0 голосов
/ 22 апреля 2019

Я только начал пробовать bootstrap React и извиняюсь, если этот вопрос слишком простой, но я просто не могу понять, как правильно и гибко использовать классы response-bootstraps.У меня есть навигационная панель, внутри которой у меня есть 2 nav (контейнера), первый из которых я хочу выровнять по левому краю, второй по центру и справа по бренду.Я не могу понять, как выровнять это, и все, что я вижу в сети, на самом деле не работает (см. Ниже, где все мои элементы все еще выровнены по левому краю, даже если я дал имя класса justify-content-center).

Кроме того, я пытался искать документы по начальной загрузке, но я просто не могу найти список всех классов, которые я могу использовать с начальной загрузкой.В разделе макета я нахожу только некоторые примеры, в основном grid, так что в основном я не понимаю, как правильно использовать bootstrap, если я не знаю, какие классы что означают.Большое спасибо! 

     <Container>
        <Navbar fixed="top" collapseOnSelect expand="lg" bg="white" variant="white">
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="justify-content-start">
                    <Nav.Link href="#features">Features</Nav.Link>
                    <Nav.Link href="#pricing">Pricing</Nav.Link>

                </Nav>
                <Nav className="justify-content-center">
                    <Nav.Link href="#deets">Services</Nav.Link>
                    <Nav.Link eventKey={2} href="#memes">
                        Invoices
                    </Nav.Link>
                </Nav>
            </Navbar.Collapse>
            <Navbar.Brand href="#home">
                <img
                    src={Logo}

                    className="d-inline-block align-top"
                    alt="React Bootstrap logo"
                />
            </Navbar.Brand>
        </Navbar>
        </Container>
...