CODEWITHSUNDEEP
cssreactjstwitter-bootstrap
systemdebt
systemdebt

Reputation: 4941

Divide space into 3 parallel blocks

I expect li inside ul to be divided into 3 parallel lists of elements next to each other. However, the list appears in a straight list.

I expected col-xs-3 to do the job but it does not seem to work. Suggestions to fix this?

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>

Upvotes: 1

Views: 32

Answers (1)

Hemadri Dasari
Hemadri Dasari

Reputation: 33984

You need to add col-xs-3 to <li> tag but not to <ul> element. Also You are not properly closed expression.

Keep in mind always that you need to add unique key to the top element inside loop in react. Try this

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>

Upvotes: 1

Related Questions