我希望li内的ul可以分成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>

最佳答案

您需要将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>

关于css - 将空间分为3个并行块,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52671871/

10-10 21:42