React Bootstrap Card Deck 没有水平对齐答案

【问题标题】：React Boostrap CardDeck does not align horizontallyReact Bootstrap Card Deck 没有水平对齐
【发布时间】：2021-05-08 08:45:42
【问题描述】：

我是 React 的新手，我试图连续显示三张卡片，但它们没有水平对齐，它们是垂直的（从上到下）。我尝试使用 cardDeck 或 cardGroup，但它们不起作用。下面是代码

import { Card, Button } from "react-bootstrap";
import "./Style.scss";

const Item = ({ varietals }) => {
    return (
    <>
        <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src={varietals.pictureUrl} />
            <Card.Body>
                <Card.Title>{varietals.title}</Card.Title>
                {/* <Card.Text>
                  {varietals.description}
                </Card.Text> */}
                <Button variant="info">Details</Button>
            </Card.Body>
        </Card>        
    </>
    )
};


export default Item;

另外，我在上面的代码中导入了一个 sass 文件，但它似乎不起作用。这是 sass 文件的简单代码：

.clem {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
};

另外，这是我做项目地图的itemList：

import Item from "../Item/Item";
    
const ItemList = ({ varietals }) => {
  return (
      <div>    
        {varietals.map((varietals) => {
        return <Item key={varietals.id} varietals={varietals} className="row" />;
        })};  
      </div>
  );
};


  export default ItemList;

最后，这是我做出承诺的 itemListContainer：

import { useEffect, useState } from "react";
import ItemList from "../Components/ItemList/ItemList";    

const ItemListContainer = () => {
  
  const [varietals, setVarietals] = useState([])

  useEffect(() => {
  const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => resolve(Aimara), 2000);
  });

  myPromise.then((result) => setVarietals(result));
  }, []);
    return (
        <>
          <ItemList varietals={varietals} />
          <ItemCountComponent stock={5} initial={1}/>
        </>
    )
};

export default ItemListContainer;

希望有人能解决。谢谢！

【问题讨论】：

标签： javascript reactjs twitter-bootstrap sass jsx

【解决方案1】：

您应该在您的 ItemList 组件中添加一个“CardGroup”包装“Card”以正确显示它们。不需要“行”类

import Item from "./Item";
import { CardGroup } from "react-bootstrap";


const ItemList = ({ varietals }) => {
  return (
      <CardGroup>    
        {varietals.map((varietals) => {
        return <Item key={varietals.id} varietals={varietals} />
        })}
      </CardGroup>
  );
};


export default ItemList;

【讨论】：

【解决方案2】：

在您的 ItemList 主 div 中应用类 .clem 就像打击一样。这样它就会为您的卡片容器应用水平行样式。

const ItemList = ({ varietals }) => {
   return (
     <div className="clem">    
        {varietals.map((varietals) => {
          return <Item key={varietals.id} varietals={varietals} className="row" />;
        })};  
     </div>
  );
};

否则，您可以使用Card Group 来满足您的要求。但是<CardGroup> 不应该出现在重复的部分。它应该放在我们目前应用类clem 的地方。详情参考here

【讨论】：