反応起動ストラップNavBarパディング

Question

私は、反応起動ストラップライブラリを使用して、Navbarのインポートを使用してページの上部にナビゲーションバーを作成しています。しかし、バーには、ここに見られるように、私が望んでいない、削除することができないような底面にいくつかのパディングがあるように見えます（黄色の下に、また、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タグにはデフォルトのマージンがありません。 whoops

Answer 2

navbarの下のスペースは、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クラス、または他のクラスからのものでもかまいません。

Answer 3

@Zeroと同じように.navbarクラスにはmargin-bottom: 20px;というプロパティがあります。他のビューのためにそれを保持したい場合は、それを上書きするか、下の要素にmargin-top: -20px;を設定する必要があります。

右側のパディングについては、垂直スクロールバーの左側にあります。私が使用しているときに同じ問題に直面したreact-sidebar.