React-Bootstrap 导航栏的填充问题

Question

我正在使用react-bootstrap库通过Navbar导入构建页面顶部的导航栏。然而，该栏似乎在底部有一些填充，我不想要并且无法删除，如下图所示（底部为黄色。此外，导航栏组件似乎没有覆盖整个页面[如栏两侧的白色空间所示]；也不确定原因）：

我希望该栏可以跨越整个页面，并且底部没有填充。

我的渲染方法如下：

  render() {
    if(Auth.isUserAuthenticated() && this.props.location.pathname === '/') {
      return <div/>;
    }
    return (
      <span className="nav-bar">
        <Navbar inverse className="fixed-top collapseOnSelect nav-bar">
          <Navbar.Collapse>
            <Navbar.Header className="locl-link">
              <Navbar.Brand>
                <LinkContainer to="/">
                  <a>locl</a>
                </LinkContainer>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
            <BootstrapNav>
              <LinkContainer to="/about">
                <NavItem active={this.linkActive("about")}>About</NavItem>
              </LinkContainer>
            </BootstrapNav>
            <BootstrapNav pullRight>
              {this.logInOut()}
            </BootstrapNav>
          </Navbar.Collapse>
        </Navbar>
      </span>
    );
  }

任何帮助都将不胜感激。

- Fraser Price

---

只需为您的Navibar设置新样式，无需填充和边距。它应该覆盖您不想要的旧样式。 - Jason Xu

Answer 1

我没有意识到 body 标签有默认边距；哎呀。

- Fraser Price

Answer 2

就像@Zero写的那样，.navbar类具有margin-bottom: 20px;属性。如果你想保留它以供其他视图使用，你需要覆盖它或在下面的元素上设置margin-top: -20px;。

至于右侧填充-它是为了垂直滚动条而留下的。当我使用react-sidebar时，我也遇到了同样的问题。

- Tomasz Mularczyk

Answer 3

导航栏下方的空白来自于bootstrap.css中的.navbar类。您可以在bootstrap.css中删除margin-bottom: 20px;。 如果您通过CDN使用bootstrap.css，您可以像这样为您的导航栏添加样式：

<Navbar style={{marginBottom: "0"}} inverse className="fixed-top collapseOnSelect nav-bar">

关于您在页面两侧或导航栏上出现空白的问题。我认为问题出在您将元素渲染到DOM的方式上。您应该检查HTML中的根DOM节点，可能它有填充或边距。这也可能来自于您的中的.nav-bar类，或其他类。

- Zero