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

非常感谢任何帮助。

Answer 1

我没有意识到body标签有默认保证金;哎呦

Answer 2

导航栏下面的空格来自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中的span类，或其他类。

Answer 3

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

当涉及到右侧的填充时 - 它左侧为垂直滚动条。当我使用react-sidebar.

时，我遇到了同样的问题

react-bootstrap NavBar填充

3 个答案: