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

我向這個組件傳遞了一個 Object 數組，例如：

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

我想獲得什么：

我想將數據分成兩列，但這樣它們太靠近並粘在一起了。 有沒有辦法表示它們，使它們占據整個頁面（總是在兩列中？）

編輯：

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

Answer 1

我改變了你的沙箱。 檢查新的

問題出在這部分代碼

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

沙盒

首先，我刪除了包含Col標簽的div ，然后將 6-grid 屬性設置為 50% 寬度。