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導航欄填充

回答

相關問題