2017-10-19 8 views
0

私のnavbarはどこにでもあります、私は間違っています。 私はちょうど反応ブートストラップの使用を開始しましたが、私はすべてを正しくインポートしていると確信しています。ここでNavbarはReact-Bootstrapを使って完全に台無しになりました

は私のナビゲーションバーには次のようになります。ここでは enter image description here

私のコードです:

import React, { Component } from 'react'; 
import { Navbar, Nav, NavDropdown, NavItem, MenuItem } from 'react-bootstrap'; 

class Header extends Component { 
    render() { 
    return (
     <Navbar inverse collapseOnSelect> 
     <Navbar.Header> 
      <Navbar.Brand> 
      <a href="#">React-Bootstrap</a> 
      </Navbar.Brand> 
      <Navbar.Toggle /> 
     </Navbar.Header> 
     <Navbar.Collapse> 
      <Nav> 
      <NavItem eventKey={1} href="#"> 
       Link 
      </NavItem> 
      <NavItem eventKey={2} href="#"> 
       Link 
      </NavItem> 
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown"> 
       <MenuItem eventKey={3.1}>Action</MenuItem> 
       <MenuItem eventKey={3.2}>Another action</MenuItem> 
       <MenuItem eventKey={3.3}>Something else here</MenuItem> 
       <MenuItem divider /> 
       <MenuItem eventKey={3.3}>Separated link</MenuItem> 
      </NavDropdown> 
      </Nav> 
      <Nav pullRight> 
      <NavItem eventKey={1} href="#"> 
       Link Right 
      </NavItem> 
      <NavItem eventKey={2} href="#"> 
       Link Right 
      </NavItem> 
      </Nav> 
     </Navbar.Collapse> 
     </Navbar> 
    ); 
    } 
} 

export default Header; 

答えて

1

チェックあなたのCSSがインポートされている場合、あなたはWebPACKのを使用していますか?

+0

誤ってv3の代わりにv4をインポートしました。これは「直接」の回答ではありませんが、私の問題は解決しました。私はwebpackを使用していますが、webpackでこれをどうすればいいですか? –

+0

dev依存関係にcss-loaderをインストールしてみてください –

関連する問題