时间戳

首页 > 解决方案 > Bootstrap - 在 React 中创建列，同时呈现数据

reactjs - Bootstrap - 在 React 中创建列，同时呈现数据

问题描述

我正在尝试以引导列格式呈现我的 JSON 数据，理想情况下，我每行有 3 个项目，并将其换行到下一行。现在，它每行只渲染一个项目。有人可以就我在这里缺少的东西指出我正确的方向吗？

我的组件的一部分：

  let parksJsx = ''
  if (!parks) {
    parksJsx = 'loading...'
  } else {
    parksJsx = parks.map(park => (
      <Container key={park.Name}>
        <Row>
          <Col lg={4} className="park-data">
            <h5>{park.Name}</h5>
            <img src={park.Thumbnail}/>
            <li>Location: {park.Location}</li>
            <li>Est. {park.Established}</li>
            <li>Area: {park.Area}</li>
            <li>Recreation Visitors: {park['Recreation visitors']}</li>
            <p>{park.Description}</p>
            <br />
          </Col>
        </Row>
      </Container>
    ))
  }

  return (
    <div>
      <h2 className="header">All U.S. National Parks:</h2>
      <div className="park-container">
        {parksJsx}
      </div>
    </div>
  )

当前的 CSS：

.park-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.park-data {
  flex: 0 1 auto;
}

标签： reactjstwitter-bootstrapflexbox

解决方案

首先，您需要将公园的渲染功能分开并只留下一列内容，然后您可以尝试在一行中渲染所有内容，它会正常工作，因为 Row 元素有一个 display: flex 。

推荐阅读