React Bootstrap карты перекрываются ⇐ Javascript

[Anonymous]

Я пытаюсь создать представление карты Bootstrap React, где все карты должны иметь некоторое пространство между друг другу, но мои созданные карты Bootstrap React не имеют ожидаемого пространства между ними.

Код: Выделить всё

import './App.css';
import HeaderComponent from './HeaderComponent';
import FooterComponent from './FooterComponent';
import BootstrapPractice from './BootstrapPractice';
function App() {
let name = "Absar Ahmad"
let testArray = [10, 20, 30, 40];
let myObject = {
'name': "Object In JXS",
'cName': "MERN",
'Desc': "React JS Learning"
}

let status = true;
return (


{name}
{
testArray.map((arrayValues, i) => {
return (

{arrayValues}

)
})
}

{myObject.name}
{myObject.cName}
{myObject.Desc}
Sum of 10 and 20= {10 + 20}

{
status ? Welcome to Ternary Operator : ""
}














);
}

export default App;

function CardExample() {
return (
Card Div
)
}
< /code>
Вот мой код bootstrappractice.js: < /p>
import Card from 'react-bootstrap/Card';
import { Col, Container, Row, Button } from 'react-bootstrap'

function BootstrapPractice() {
return (




Our Courses






Card Title

Some quick example text to build on the card title and make up the
bulk of the card's content.

Go somewhere







Card Title

Some quick example text to build on the card title and make up the
bulk of the card's content.

Go somewhere






Card Title

Some quick example text to build on the card title and make up the
bulk of the card's content.

Go somewhere






Card Title

Some quick example text to build on the card title and make up the
bulk of the card's content.

Go somewhere






Card Title

Some quick example text to build on the card title and make up the
bulk of the card's content.

Go somewhere






Card Title

Some quick example text to build on the card title and make up the
bulk of the card's content.

Go somewhere






)
}

export default BootstrapPractice;

< /code>
Вот мой код app.css: < /p>
.row{
max-width: 1320px;
margin: auto;
flex-wrap: wrap;
display: flex;
}

.cardItems{
flex-basis: 23%;
margin: 1%;
height: 200px;
background-color: brown;
}

.main{
max-width: 1320px;
margin: auto;
background-color: antiquewhite;
}
< /code>
Вот мой headercomponent.js < /p>
import React from 'react'

export default function HeaderComponent() {
return (

HeaderComponent

)
}

< /code>
И вот мой код coleercomponent.js < /p>
import React from 'react'

export default function FooterComponent() {
return (
Footer  Component
)
}

Вот вывод моего кода:
Вот что я ожидал, что это будет выглядеть как


Подробнее здесь: https://stackoverflow.com/questions/796 ... verlapping