react-bootstrap NavBar填充

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類。 你可以刪除margin-bottom: 20px; 在bootstrap.css中。 如果您通過CDN使用bootstrap.css，則可以向導航欄添加樣式，如下所示：

<Navbar style={{marginBottom: "0"}} inverse className="fixed-top collapseOnSelect nav-bar">

關於你的任何一方或導航欄上的空白問題。 我認為問題在於如何將元素呈現到DOM中。 您應該檢查HTML中的根DOM節點，可能它有填充或邊距。 它也可以來自您的span的.nav-bar類或其他類。

Answer 3

就像@Zero寫的.navbar類有margin-bottom: 20px; 屬性。 你需要覆蓋它或設置margin-top: -20px; 在下面的元素上，如果你想保留它的其他視圖。

當談到右側的填充時 - 它留給垂直滾動條。 當我使用react-sidebar時，我遇到了同樣的問題。