如何让bootstrap张卡片在同一行？反应堆

Question

我一直在使用 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;

Answer 1

我想你可以尝试在我猜的行 div 上使用 bootstrap class - align-items-baseline。检查另一个 post 的以了解有关此 align-items-baseline 属性.

的更多信息

如果这不起作用，那么我想你可以试试这个：

<div className='container'>

    <!-- First a row div with only the 3 column headings -->
    <div className='row'>
        <div className='col-4'>
            <h4>Opis artikla</h4>
        </div>
        <div classname='col-4'>
            <h4>Cijena</h4>
        </div>
        <div classname='col-4'>
            <h4>Prikaži ponudu</h4>
        </div>
    </div>

    <!-- Then the data of the 3 columns -->
    {currentPosts && currentPosts.map((item) => (

        <!-- A new row for each items data -->
        <div className='row'>

            <!-- For the first column -->
            <div className='col-4'>
                <div key={item.id} className='card'>
                    <h3>{item.descr}</h3>
                    <h5>Broj kvadrata: {item.sqm}</h5>
                </div>
            </div>

            <!-- For the second column -->
            <div className='col-4'>
                <div key={item.id} className='card'>
                    <h3>{item.price}</h3>
                    <h5>Cijena po kvadratu: {item.ppm2}/m2</h5>
                </div>
            </div>

            <!-- For the third column -->
            <div className='col-4'>
                <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>

Update - 我试过上面的代码，正如你所说，是的，它没有用。但后来我做了下面的代码，它按照你想要的方式工作，或者我认为你希望它像这样工作：

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

var currentPosts = [
  { sqm: 'One', ppm2: 'a', id: '1' },
  { sqm: 'Two', ppm2: 'b', id: '2' },
  { sqm: 'Three', ppm2: 'c', id: '3' }
];

const Dashboard = () => {

  return (
    <div className='container'>

    <div className='row'>
        <div className='col-4'>
            <h4>Opis artikla</h4>
        </div>
        <div className='col-4'>
            <h4>Cijena</h4>
        </div>
        <div className='col-4'>
            <h4>Prikaži ponudu</h4>
        </div>
    </div>

    {currentPosts && currentPosts.map((item) => (

        <div className='row mt-4 align-items-baseline'>

            <div className='col-4'>
                <div key={item.id} className='card'>
                    <h3>{item.descr}</h3>
                    <h5>Broj kvadrata: {item.sqm}</h5>
                </div>
            </div>

            <div className='col-4'>
                <div key={item.id} className='card'>
                    <h3>{item.price}</h3>
                    <h5>Cijena po kvadratu: {item.ppm2}/m2</h5>
                </div>
            </div>

            <div className='col-4'>
                <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>
    ))}

</div>
  );
};

export default Dashboard;

您可以将分页和其他代码行添加到此... 实际上，我所做的唯一更改是将 mt-4 和 align-items-baseline classes 添加到行 div 有数据。

我从这段代码得到的结果是：

如何让bootstrap张卡片在同一行？反应堆

How to make bootstrap cards be in the same line? Reactjs

twitter-bootstrap

reactjs

react-bootstrap

bootstrap-4