react-bootstrap 导航栏填充答案

【问题标题】：react-bootstrap NavBar paddingreact-bootstrap 导航栏填充
【发布时间】：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 一个没有填充和边距的新样式。它应该覆盖你不想要的旧样式。

标签： reactjs jsx react-bootstrap

【解决方案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 类或其他一些类。

【讨论】：