react-bootstrap导航栏填充

我使用react-bootstrap库在我的页面顶部使用Navbar导入构建导航栏。但是，栏似乎有一些填充底部，我不希望和似乎无法删除，如此处所示（底部黄色。此外navbar组件似乎跨越整个页面[如空白空间所示上栏两边]不知道为什么，这是其一）：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> 
    ); 
    }

任何帮助将不胜感激。

来源

2017-06-15 Fraser Price

只要给你的'''Navibar'''没有填充和边距的新风格。它应该覆盖你不想要的旧样式。 –

我没有意识到body标签有默认的边距;哎呦

来源

2017-06-25 11:13:35

导航栏下方的空间来自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课程或其他课程。

来源

2017-06-21 06:35:13 Zero

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

当谈到在右侧填充 - 它留给垂直滚动条。我在使用时遇到了同样的问题react-sidebar.

来源

2017-06-23 17:32:42 Tomasz

react-bootstrap导航栏填充

回答

相关问题