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">

这是我的反应应用程序的最开始，它没有正确应用这些样式：

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;

App.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＆amp; amp;的项目。 Bootstrap 4虽然：reactstrap。

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

1 个答案: