React Bootstrap NavBar Container, установите ширину для автоматического

Question

Я пытаюсь использовать NavBar из начальной загрузки. Однако, кажется, есть <div class="container">, который добавляет width. Как мне установить width на auto?

Я попробовал следующее:

.navbar > .container {
    width:auto;
}

Но этот запас все еще остается. Я также пытался

<Navbar style={{ width: "auto" }}>
    <Navbar.Header>
       ...

Но безуспешно. Мой полный код:

<Row>
    <Navbar>
        <Navbar.Header>
            <Navbar.Brand className="lang-de">
                <a href="/" />
            </Navbar.Brand>
            <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
            <Nav pullRight>
                <NavItem eventKey={1} href="#">
                    Impressum
                </NavItem>
            </Nav>
        </Navbar.Collapse>
    </Navbar>
</Row>

Answer 1

вы можете использовать только React Bootstrap Fixed top

<Navbar fixed="top" />

Это автоматически создаст CSS ниже:

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

Вы можете увидеть эту и другие позиции в документации здесь

Answer 2

Просто добавьте "жидкость" рядом с Navbar в свой код

<Row>
<Navbar fluid>
    <Navbar.Header>
        <Navbar.Brand className="lang-de">
            <a href="/" />
        </Navbar.Brand>
        <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
        <Nav pullRight>
            <NavItem eventKey={1} href="#">
                Impressum
            </NavItem>
        </Nav>
    </Navbar.Collapse>
</Navbar>

Answer 3

В вашем css, попробуйте следующее:

.navbar > .container {
    width:auto!important;
}