react-bootstrap 导航栏填充

Posted 2023-02-22

【中文标题】react-bootstrap 导航栏填充

【英文标题】：react-bootstrap NavBar padding

【发布时间】：2017-11-18 12:30:40

【问题描述】：

我正在使用 react-bootstrap 库在我的页面顶部使用导航栏导入构建导航栏。但是，该栏似乎在底部有一些我不想要并且似乎无法删除的填充，如此处所示（底部为黄色。导航栏组件似乎没有跨越整个页面[如空白所示在栏的任一侧]；不知道为什么会这样）：

我希望栏跨越页面并且底部没有填充。

我的渲染方法如下：

  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>
    );
  

任何帮助将不胜感激。

【问题讨论】：

只需给您的Navibar 一个没有填充和边距的新样式。它应该覆盖你不想要的旧样式。

【参考方案1】：

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

【参考方案2】：

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

当涉及到右侧的填充时 - 左侧是垂直滚动条。我在使用react-sidebar.时遇到了同样的问题

【参考方案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 节点，可能它有填充或边距。它也可能来自您的span 中的.nav-bar 类或其他一些类。