javascript - 无法将 Bootstrap 或 React-Bootstrap 样式应用于使用 create-react-app 创建的应用程序

Question

正如标题所说，在使用 create-react-app 之后，我按照 Bootstrap 和 React-Bootstrap 文档的安装步骤进行操作。 :

npm install --save react-bootstrap bootstrap@4.0.0-alpha.6

然后在 index.html 中包含一个 Bootstrap CDN 的链接以防万一:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

这是我的 react 应用程序的开头，它没有正确应用样式:

MyNavbar.jsx:

import React, { Component } from 'react';
import {Navbar} from 'react-bootstrap';
import {Nav} from 'react-bootstrap';
import {NavItem} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

class MyNavbar extends Component {
    render() {
        return(
            <div>
                <Navbar>
                    <Navbar.Header>
                        <Navbar.Brand>
                            <a href="#"> grood </a>
                        </Navbar.Brand>
                    </Navbar.Header>
                    <Nav>
                        <NavItem eventKey={2} href="#"> For Eateries </NavItem>
                    </Nav>
                </Navbar>
            </div>
        )
    }
}

export default MyNavbar;

应用程序.js:

import React, { Component } from 'react';
import MyNavbar from './MyNavbar.jsx'
import 'bootstrap/dist/css/bootstrap.css';

class App extends Component {
    render() {
        return (
            <div className="App">
                <MyNavbar />
            </div>
        );
    }
}

export default App;

MyNavbar 和 App 都在同一个 src 文件中

Answer 1

react-bootstrap是为 Bootstrap 3 构建的 - 而不是 4。

将包 bootstrap 3 安装到您的元素中并从那里导入 css。

虽然有一个 React & Bootstrap 4 元素:reactstrap .