Bootstrap在React中运行不正常

Question

我有React项目，我使用create-react-app生成。在项目中我想使用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

<强> EDITED

你必须添加引导主题

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