【发布时间】：2021-04-30 05:12:24
【问题描述】：
我一直在使用 Bootstrap 4 向用户显示数据。
现在我有了在列和行中显示数据的想法。前端是 ReactJS，它从后端响应中获取数据。现在我已经设法在卡片中显示数据，但它们到处都是。
这是我的仪表板的外观：
如您所见，它无处不在，我需要每个人都在同一行。 （他们没有互相粘着）
有没有办法只用 Bootstrap 来解决这个问题，还是需要创建某种我自己的 css？
这里是Dashboard.js 组件：
import React, { useState, useEffect } from 'react';
import ArticleService from '../services/article.service';
import { Link } from 'react-router-dom';
import Pagination from 'react-js-pagination';
const Dashboard = () => {
const [content, setContent] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage] = useState(10);
useEffect(() => {
const fetchPosts = async () => {
const res = await ArticleService.articles();
setContent(res.data);
};
fetchPosts();
}, []);
// Get current posts
const indexOfLastPost = currentPage * postsPerPage;
const indexOfFirstPost = indexOfLastPost - postsPerPage;
const currentPosts = content.slice(indexOfFirstPost, indexOfLastPost);
// Change page
const handlePageChange = (pageNumber) => {
setCurrentPage(pageNumber);
};
return (
<div className='container'>
<div className='row'>
<div className='col-sm'>
<h4>Opis artikla</h4>
{currentPosts &&
currentPosts.map((item) => (
<div key={item.id} className='card'>
<h3>{item.descr}</h3>
<h5>Broj kvadrata: {item.sqm}</h5>
</div>
))}
</div>
<div classname='col-sm'>
<h4>Cijena</h4>
{currentPosts &&
currentPosts.map((item) => (
<div key={item.id} className='card'>
<h3>{item.price}</h3>
<h5>Cijena po kvadratu: {item.ppm2}/m2</h5>
</div>
))}
</div>
<div classname='col-sm'>
<h4>Prikaži ponudu</h4>
{currentPosts &&
currentPosts.map((item) => (
<div key={item.id} className='card'>
<Link to={`/article/${item.id}`}>
<h5>
Prikaži<br></br>
<br></br>
<br></br>
</h5>
</Link>
</div>
))}
</div>
</div>
<nav>
<div className='w3-bar w3-xlarge'>
<ul className='pagination justify-content-center'>
<li className='page-item'>
<Pagination
hideDisabled
hideNavigation
hideFirstLastPages
currentPage={currentPage}
itemsCountPerPage={10}
totalItemsCount={content.length}
pageRangeDisplayed={indexOfLastPost}
onChange={handlePageChange}
/>
</li>
</ul>
</div>
</nav>
</div>
);
};
export default Dashboard;
【问题讨论】：
标签： reactjs twitter-bootstrap bootstrap-4 react-bootstrap