自举不'；在ReactJS应用程序中无法正常工作

我用bootstrap学习了一门课程，为了练习，我想在ReactJS中使用它。这个应用程序非常小，只是一个实践，不是一个真正的项目

我猜我做错了什么，因为我没有在屏幕上看到4列。这就是我得到的

所以我创建了一个react应用程序

npx创建反应应用程序我的应用程序

我安装了bootstrap并使用它

npm安装--保存引导程序

在index.js中

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import './index.css';
import App from './App';



import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

---

有人请告诉我，我做错了什么？

您需要将带有类的div容器和行移动到App.js

App.js

  render() {
    return (
      <div className="App">
        <div className="container">
          <div className="row">
            {this.state.cards.map(card => {
              return <CardList card={card} key={card.id} />;
            })}
          </div>
        </div>
      </div>
    );
  }

render（）{
返回(
{this.state.cards.map（card=>{
回来
})}
);
}

名片

const cardList = ({ card }) => {
  return (
    <div>
      <div className="col-sm-4 col-md-4 col-lg-4 card-list">
        <button className="btn btn-danger">click</button>
        <h1>{card.name}</h1>
        <p>{card.email}</p>
      </div>
    </div>
  );
};

const cardList=（{card}）=>{
返回(
点击
{card.name}
{card.email}

);
};

另外请注意，引导网格系统使用12列，而您在类名中使用4列，因此您有12/4=3列，如果您想要有4列，您需要在组件中使用3列，如

.card-list {
  background-color: yellow;
  border: 1px solid red;
  margin: 10px;
}

  render() {
    return (
      <div className="App">
        <div className="container">
          <div className="row">
            {this.state.cards.map(card => {
              return <CardList card={card} key={card.id} />;
            })}
          </div>
        </div>
      </div>
    );
  }

const cardList = ({ card }) => {
  return (
    <div>
      <div className="col-sm-4 col-md-4 col-lg-4 card-list">
        <button className="btn btn-danger">click</button>
        <h1>{card.name}</h1>
        <p>{card.email}</p>
      </div>
    </div>
  );
};