Question

我正在尝试从react bootstrap中使用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

在您的CSS中，尝试以下操作：

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

Answer 2

您只能使用React Bootstrap 固定顶部

<Navbar fixed="top" />

它将自动创建以下CSS：

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

您可以在文档here

中看到此职位和其他职位

Answer 3

只需在代码中的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>

React Bootstrap NavBar容器，将宽度设置为自动

3 个答案: