How to get <li> to display inline when containing React Bootstrap Rows and Columns

Question

I have content that I want to format and display in a horizontal list. It will display horizontally when I have only html in the list, but it won't when I include React Bootstrap grid layout components like Row and Column.

For example, see code below, or see both working and not working reproduced here: Problem reproduction

//style:
ul#event-list li {
  display: inline;
}

<Container>
  <Row>
    <Col>
      <ul id='event-list'>
        <li>Title this</li>
        <li>Title that</li>
        <li>Title the other</li>
        <li>Title again</li>
        <li>Title this</li>
      </ul>
    </Col>
  </Row>
</Container>

However, when I try to use Bootstrap grid components inside the <li> element, it displays the list vertically. For example, this doesn't work (i.e. displays the list vertically):

<Container>
  <Row>
    <Col>
      <ul id='event-list'>
        <li>
          <Row>
            <Col>
              Some content
            </Col>
          </Row>
          <Row>
            <Col>
              Some more content
            </Col>
          </Row>
        </li>
      </ul>
    </Col>
  </Row>
</Container>

My question is, how do I use React Bootstrap layout options within an <li> element while still having it display horizontally?

Answer 1

Just try changing inline to inline-block - hoepfully that would work.