Bootstrap 在 React 中表现不正确

Question

我有一个使用 create-react-app 生成的 React 项目。在项目中我想使用Bootstrap。项目生成后，有一个名为 public/index.html 的文件。我在那里放了 Bootstrap CDN。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我有一个名为 ProductListComponent 的组件。在渲染部分，我使用了面板。它正在创建面板，但其行为不符合 Bootstrap 标准。

import React,{ Component } from 'react';

class ProductListComponent extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <div className="row">
                <div className="col-lg-10 col-md-10">
                    <div className="panel panel-primary">
                        <div className="panel-header">
                            <h3>Products</h3>
                        </div>
                        <div className="panel-body">

                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default ProductListComponent;

输出那么谁能告诉我，我做错了什么？

Answer 1

为什么不使用 reactstrap。它专门用于响应。而且也很简单。

或者 react-bootstrap 如果您专门查看 Bootstrap v3

Answer 2

已编辑

您必须添加 bootstrap 主题

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

Bootstrap 在 React 中表现不正确

Bootstrap not behaving correctly in React

javascript

npm

reactjs

twitter-bootstrap-3

create-react-app