时间戳

首页 > 解决方案 > React Bootstrap NavBar Container，将宽度设置为自动

css - React Bootstrap NavBar Container，将宽度设置为自动

问题描述

我正在尝试使用来自 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>

标签： cssreactjssassnavbarreact-bootstrap

解决方案

你只能使用 React Bootstrap固定顶部

<Navbar fixed="top" />

它将自动创建下面的 CSS：

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

您可以在此处查看文档中的 this 和 other 职位

推荐阅读