在 Reactjs 中映射后如何并排显示列？

Question

我有这段代码可以映射和显示数组中我网站的 post。

import articleContent from '../data/articleContent';

const ArticlesList = () => (
  <>
    <ArticlesStyle>
      <h1 className="article-h1">Nasze artykuły</h1>
        {articleContent.map((article, key) =>
          <Link className="article-link" key={key} to={`/artykul/${article.name}`}>  
            <Row className="align-items-center text-center">
              <Col xs={4} md={5}>
                <h2 style={{ color: '#14B2E6' }}>{article.title}</h2>
              </Col>
            </Row>
            <Row className="align-items-center text-center">  
              <Col className="text-left" xs={8} md={5}>
                <p style={{ color: 'black' }}>{article.content[0].substring(0, 150)}...</p>
              </Col>
            </Row>
          </Link>
        )}
    </ArticlesStyle>
  </>
)

我的目标是在 PC 显示屏上自动在一行中显示两个 post（我猜是在一行中的两列），在移动设备上自动显示一个 post。我试图做一些小的调整让它工作，但我现在毫无头绪。

这是它现在在 PC 上的样子，我无法摆脱这个 标记区域 - 我认为这是与 display: flex 有关的问题;.

Answer 1

您可以为此使用 CSS-grid。对于 web，设置第 2 列的编号，然后通过在 CSS 中使用媒体查询，您可以在移动宽度的情况下设置第 1 列的编号。

Answer 2

好的，所以我设法解决了自己的问题。

首先，我添加了外部（.map 函数的外部）Row 和 Col。我将 .map 函数内部的所有内容都包装到 Container 中。

const ArticlesList = () => (
  <>
    <ArticlesStyle>
      <Row>
        <Col className="article-list-grid">
          {articleContent.map((article, key) =>
            <Container className="wrapper">
              <Link className="article-link" key={key} to={`/artykul/${article.name}`}>  
                <Row className="align-items-center text-center">
                  <Col xs={true} md={true}>
                    <h2 style={{ color: '#14B2E6' }}>{article.title}</h2>
                  </Col>
                </Row>
                <Row className="align-items-center text-center">  
                  <Col xs={true} md={true}>
                    <p style={{ color: 'black' }}>{article.content[0].substring(0, 150)}...</p>
                  </Col>
                </Row>
              </Link>
            </Container>
          )}
        </Col>
      </Row>
    </ArticlesStyle>
  </>
)

之后一切都变成了样式，如下所示：

const ArticlesStyle = styled.div`
    .article-list-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .wrapper {
        @media (max-width: 600px) {
            flex: 100%;
        }
        @media (min-width: 900px) {
            flex: 50%;
        }
    }

    .article-link {
        text-decoration: none;
    }
`;

此处最重要的是 flex: 50% 在 PC 屏幕上，这导致连续 2 列。现在一切看起来都如我所愿：

PC

手机

在 Reactjs 中映射后如何并排显示列？

How to display cols next to each other after mapping in Reactjs?

twitter-bootstrap

reactjs

react-bootstrap