Bootstrap не работает должным образом в приложении ReactJS

Question

Я изучаю курс с начальной загрузкой и, чтобы практиковать его, я хотел использовать его в ReactJS. Приложение очень маленькое, это просто практика, а не реальный проект.

Я предполагаю, что я делаю что-то не так, потому что я не вижу на своем экране 4 колонки. Вот что я получаю

снимок экрана

Итак, я создал приложение реакции 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;

И отсюда я передаю реквизиты компоненту 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;
}

Кто-то подскажите, пожалуйста, что я делаю не так?

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

Cardlist

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 столбцов, а вы используете 4 в classNames, поэтому у вас есть 12/4 = 3 столбца, если вы хотите иметь 4 столбца, вам нужно использовать 3 в ваших компонентах, таких как <div className="col-sm-3 col-md-3 col-lg-3 card-list">