我无法使用 React 和 CSS 水平对齐我的组件

Question

我在排列一些 React Bootstrap 卡片时遇到了一些问题，我水平对齐它们的唯一方法是将它们都放在一个 div 中，但我需要每个卡片都有一个组件卡，如果我运行这样的代码，它最终会出错

基本上，我每次添加卡片时，它都是垂直对齐的，而不是水平对齐的。

HostingCard.tsx

import { Card, Button } from "react-bootstrap";
import "./App.css";

export default function HostingCard() {
  return (
      <div className="main">
        <Card style={{ width: "18rem" }}>
          <Card.Img variant="top" src="https://picsum.photos/200" />
          <Card.Body>
            <Card.Title>Card Title</Card.Title>
            <Card.Text>
              Some quick example text to build on the card title and make up the
              bulk of the card's content.
            </Card.Text>
            <Button variant="primary">Go somewhere</Button>
          </Card.Body>
        </Card>
    </div>
  );
}

App.tsx

import React from "react";
import "./App.css";
import Header from "./Header";
import HostingCard from "./HostingCard";

function App() {
  return (
    <div className="App">
      <Header />
      <h1 style={{ padding: "1rem" }}>Hospedagens</h1>
      <HostingCard />
      <HostingCard />
    </div>
  );
}

App.css

 .main {
  display: flex;
  flex-direction: row;
  margin: 0.1rem;
  padding: 1rem;
}

Answer 1

flexDirection: row 适用于内行的子项。您正在创建一列行，其中每行仅包含一个项目。

要使该行作为一行工作，它需要是用于卡片的容器，如下所示：

function App() {
  return (
    <div className="App">
      <Header />
      <h1 style={{ padding: "1rem" }}>Hospedagens</h1>
      <div style={{ flexDirection: 'row', /* ...more styles */ }}>
        <HostingCard />
        <HostingCard />
      </div>
    </div>
  );
}

由于您已经在使用 React Bootstrap，您可以浏览其布局文档并选择他们已经构建的合适的东西，而不是自己设计样式 div。

Horizontal Stack 看起来像你想要的：

function App() {
  return (
    <div className="App">
      <Header />
      <h1 style={{ padding: "1rem" }}>Hospedagens</h1>
      <Stack direction="horizontal" gap={4}>
        <HostingCard />
        <HostingCard />
      </Stack>
    </div>
  );
}

看看它的实现，您会发现它最终是一个 div 容器，带有 flexDirection: row 加上一堆额外的预设选项和样式。

我无法使用 React 和 CSS 水平对齐我的组件

I can't align my components horizontally using React and CSS

css

reactjs

react-bootstrap