Bootstrap 如何在两个不同的列中显示Map结果

e5nqia27 于 2023-04-27 发布在 Bootstrap

关注(0)|答案(3)|浏览(135)

我有一个任务，但我无法在reactjs中得到它的解决方案。我想在两列中显示结果，如：因此，每个下一个元素都应添加到第二列中，但第一列应限制为2行。

item 1 | item 4
item 2 | item 5
       | item 6

当我循环遍历数组时，列被分成相等的顺序，但正如你在图中看到的，我需要以2：3的比例拆分它们。我在这里给出了我到目前为止所尝试的沙箱链接。

// Example class component
class Thingy extends React.Component {
  render() {
  const secondaryNav = [
    {
      title: "Games",
      name: ["Roadrash", "Prince of Persia", "Counter Strike"]
    },
    {
      title: "Resources",
      name: ["Images", "Videos", "E-books"]
    },
    {
      title: "Shop",
      name: ["Shop now"]
    },
    {
      title: "Account",
      name: ["Log In", "Register"]
    },
    {
      title: "Support",
      name: ["Email", "Call Us", "Get a callback"]
    }
  ];
    return (
      <div className="App">
      <div className="container">
        <div className="row">
          {secondaryNav.map((item, i) => {
            return (
              <div className="col-lg-6 col-md-6">
                <h3>{ item.title }</h3>
                <ul>
                  {item.name.map((items, i) => {
                    return <li>{items}</li>
                  })}
                </ul>
              </div>)
          })}
        </div>
      </div>
    </div>
    )
  }
}

// Render it
ReactDOM.render(
  <Thingy title="I'm the thingy" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
crossorigin="anonymous">

SANDBOX

twitter-bootstrap

来源：https://stackoverflow.com/questions/66542385/how-to-display-result-of-map-in-two-different-columns

3条答案

按热度按时间

1aaf6o9v1#

你需要在上面添加css，你也可以根据自己的喜好对数组进行切片。
这是一段代码

<div className="row">
  {secondaryNavData.slice(0, 2).map((item, i) => {
    return (
      <div className="col-lg-6 col-md-6">
        <h3>{item.title}</h3>
        <ul>
          {item.name.map((items, i) => {
            return <li>{items}</li>;
          })}
        </ul>
      </div>
    );
  })}
</div>
<div className="row-2">
  {secondaryNavData.slice(2, 5).map((item, i) => {
    return (
      <div className="col-lg-6 col-md-6">
        <h3>{item.title}</h3>
        <ul>
          {item.name.map((items, i) => {
            return <li>{items}</li>;
          })}
        </ul>
      </div>
    );
  })}
</div>

尝试这个codesandbox基于你的完整代码与css https://codesandbox.io/s/elegant-grass-nmeux

赞(0）回复(0）举报 2023-04-27

vltsax252#

slice可以帮助我们在(0,2)和(2,5之间切片数组，因此我们可以Mapdiv。对于这个用例，我们不需要来自bootstrap的row类。也可以简单地用col替换它。

更新问题沙盒-https://codesandbox.io/s/goofy-black-4m4ii?file=/src/styles.css

赞(0）回复(0）举报 2023-04-27

w8rqjzmb3#

这里有一些很好的答案，但我想添加一个只支持CSS的元素。在我的例子中，一些元素最终会呈现为null，所以使用Javascript，我最终得到一列有6个元素，另一列只有2个元素。
我想到了一个.filter（），在这里我渲染每个元素，看看它们是否是null，但这似乎非常低效。
挖了一点，最后使用了以下CSS：

.container {
  columns: 2;
  column-gap: 1rem;
}

.container > * {
  /** Avoid CSS splitting any elements in two */
  break-inside: avoid;
  
  /** Demo */
  background-color: #f0f;
  width: 100%;
  height: 30px;
  margin-bottom: 1rem;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

赞(0）回复(0）举报 2023-04-27

我来回答

Bootstrap 如何在两个不同的列中显示Map结果

3条答案

相关问题

热门标签

最新问答