ReactJS：在两列中呈现数据答案

【问题标题】：ReactJS: Render data in two columnsReactJS：在两列中呈现数据
【发布时间】：2021-09-22 11:17:51
【问题描述】：

我有这个组件：

export const RenderDetail = props => {
  const createRows = props.content.reduce(function (rows, key, index) {
    console.log('rows, key, index', rows, key, index);
    return (index % 2 === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows;
  }, []);

 return (
    <div>
      {createRows.map((row, index) => {
        return (
          <div key={`item_${index}`}>
            <Row>
              {row.map((col, key) => {
                return (
                  console.log('col ', col),
                  (
                    <div key={`item_${key}`} style={{ margin: '20px' }}>
                      <Col>
                        <dl className="jh-entity-details">
                          <dt>
                            <span id={col.id}>{col.name}</span>
                          </dt>
                          <dd>{col.value}</dd>
                        </dl>
                      </Col>
                    </div>
                  )
                );
              })}
            </Row>
          </div>
        );
      })}
    </div>
  );
};

我将一个 Object 数组传递给该组件，例如：

const Container = [
{
 id: "id",
 name: "ID",
 value: "10"
},
]

我想得到什么：

我想把数据分成两列，但这样它们太靠近了，粘在一起了。有没有办法表示它们，以便它们占据整个页面（总是在两列中？）

编辑：

按照建议使用<Col xs="12" md="6">

【问题讨论】：

可以添加沙箱吗？你用reactstrap吗？
是的，我使用 reactstrap，我创建了一个沙箱 codesandbox.io/s/serene-elgamal-57cog?file=/src/…（但 index.js 可能有些问题）
@Jack23 使用作为你的列
@VladislavAkhmetvaliyev 我已经尝试过您的解决方案，但效果不佳。（我发了一张新照片）

标签： javascript css reactjs reactstrap

【解决方案1】：

我改变了你的沙盒。检查新的

问题出在这部分代码

                <div key={`item_${key}`} style={{ margin: '20px' }}>
                  <Col>

sandbox

首先我删除了包含Col标签的div，然后将6-grid属性设置为50%的宽度。

【讨论】：