css - 将空间分成3个平行 block

Question

我希望 ul 中的 li 被分成 3 个平行的元素列表。但是，该列表显示为直线列表。

我希望 col-xs-3 能完成这项工作，但它似乎不起作用。有解决此问题的建议吗？

return <div id="col_sub_1">
  <ul className="col-xs-3 sub-menu-width ">
  {
    childitem.map(function(subcat,subcatindex){
      {/*--LEAF WHEN NO CHILD ELEMENTS */}
      return  <li>
      {
        subcat.id !=54 ? <a className="event_menu_item_desktop"><span> {subcat.name}</span></a> : null
      </li>
    })
  }
  </ul>
</div>

Answer 1

您需要添加 col-xs-3至 <li>标记而不是 <ul>元素。另外你没有正确关闭表达式。

请始终记住，您需要将唯一键添加到 React 循环内的顶部元素。试试这个

return <div id="col_sub_1">
  <ul className="sub-menu-width ">
  {
    childitem.map((subcat,subcatindex) => (
      <li key={subcat.id} className="col-xs-3">
      {subcat.id !=54 ? <a className="event_menu_item_desktop"><span> {subcat.name}</span></a> : null}
      </li>
    ))}
  </ul>
</div>