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

已编辑

您必须添加引导主题

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