ReactJS：在两列中呈现数据

Question

我有这个组件：

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>
  );
};

我向该组件传递了一个对象数组，例如：

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

我想要得到的东西：

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

编辑：

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

Answer 1

我修改了你的沙箱。检查新的

问题出在这部分代码

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

sandbox

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

ReactJS：在两列中呈现数据

ReactJS: Render data in two columns

javascript

css

reactjs

reactstrap