Bootstrap 在 ReactJS 应用程序中无法正常工作答案

【问题标题】：Bootstrap doesn't work properly in ReactJS applicationBootstrap 在 ReactJS 应用程序中无法正常工作
【发布时间】：2020-04-14 13:02:28
【问题描述】：

我学习了一门带有引导程序的课程，为了练习它，我想在 ReactJS 中使用它。该应用程序很小，只是一个练习，而不是一个真正的项目。

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

screenshot

所以我创建了一个反应应用 npx create-react-app my-app 我安装了引导程序并使用它。

npm install --save bootstrap

在 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'));

我有 App.js

import React, { Component } from 'react';
import './App.css';

import CardList from './componets/card-lists/card-list';

class App extends Component {
  state = {
    cards: []
  }
  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then(users => this.setState({ cards: users }))
      .catch((error) => {
        console.log('Fetch users error ', error)
      })
  }

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

export default App;

从这里我将 props 传递给 card-list.js 组件。

const cardList = ({ card }) => {
  return (
    <div>
      <div className="container">
        <div className="row">
          <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>
      </div>
    </div>
  );
};

export default cardList;

在 css 中我只有几行：

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

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

【问题讨论】：

标签： reactjs bootstrap-4

【解决方案1】：

您需要将带有类容器和行的 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>
    );
  }

卡片清单

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>
  );
};

另外请注意，Bootstrap 网格系统使用 12 列，而您在 classNames 中使用 4，因此您有 12 /4 =3 列，如果您想有 4 列，则需要在组件中使用 3，例如 @ 987654323@

【讨论】：