將Bootstrap導航欄添加到create-react-app項目

Question

我有一個全新的項目，使用create-react-app創建。我已經加入引導：

npm install --save bootstrap@3 

而且我已經在我的根index.js其導入：

import 'bootstrap/dist/css/bootstrap.css'; 

現在我已經添加了導航欄例如，從Bootstrap documentation到默認App.js JSX的頂部和我得到一個無格式的混亂。

我知道bootstrap在這個文件中工作，因爲我還添加了一個正在通過引導正確設置樣式的按鈕。但是導航欄根本不工作。

這裏是我的App.js：

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <nav className="navbar navbar-toggleable-md navbar-light bg-faded"> 
      <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
      <span className="navbar-toggler-icon"></span> 
      </button> 
      <a className="navbar-brand" href="#">Navbar</a> 
      <div className="collapse navbar-collapse" id="navbarNav"> 
      <ul className="navbar-nav"> 
       <li className="nav-item active"> 
       <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a> 
       </li> 
       <li className="nav-item"> 
       <a className="nav-link" href="#">Features</a> 
       </li> 
       <li className="nav-item"> 
       <a className="nav-link" href="#">Pricing</a> 
       </li> 
       <li className="nav-item"> 
       <a className="nav-link disabled" href="#">Disabled</a> 
       </li> 
      </ul> 
      </div> 
     </nav> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     <button className="btn">Button</button> 
     </div> 
    ); 
    } 
} 

export default App; 

Answer 1

問題是使用引導v3進行引導v4的例子。使用v3 Navbar更新代碼或將引導版本更新爲v4應該可以解決問題。

Answer 2

不要用引導的方式。改爲使用react-bootstrap。這裏有一個鏈接：

React Bootstrap

一個例子代碼：

const NavDropdownExample = React.createClass({ 
    handleSelect(eventKey) { 
    event.preventDefault(); 
    alert(`selected ${eventKey}`); 
    }, 

    render() { 
    return (
     <Nav bsStyle="tabs" activeKey="1" onSelect={this.handleSelect}> 
     <NavItem eventKey="1" href="/home">NavItem 1 content</NavItem> 
     <NavItem eventKey="2" title="Item">NavItem 2 content</NavItem> 
     <NavItem eventKey="3" disabled>NavItem 3 content</NavItem> 
     <NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown"> 
      <MenuItem eventKey="4.1">Action</MenuItem> 
      <MenuItem eventKey="4.2">Another action</MenuItem> 
      <MenuItem eventKey="4.3">Something else here</MenuItem> 
      <MenuItem divider /> 
      <MenuItem eventKey="4.4">Separated link</MenuItem> 
     </NavDropdown> 
     </Nav> 
    ); 
    } 
}); 

ReactDOM.render(<NavDropdownExample />, mountNode);