Bootstrap 将列表元素包装成 3 行

Question

I would like to wrap a list elements into 3 column using one <ul>

Just to clarify what I want:

<ul class="list-group list-group-flush row-cols-3">
    <li class="list-group-item">Lorem Ipsum</li>
    <li class="list-group-item">Lorem Ipsum</li>
    <li class="list-group-item">Lorem Ipsum</li>
    <li class="list-group-item">Lorem Ipsum</li>
</ul>

I tried using row-cols-3 but it does not working.

This is how it looks right now:

UPDATE

#1

#2

#3

Answer 1

Here is a solution thanks to https://getbootstrap.com/docs/5.0/components/list-group/#horizontal and @fabio.sang's comment at How to specify an element after which to wrap in css flexbox? . Added some more li items for testing purposes.

 li { flex-basis: 33%; }

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <ul class="list-group list-group-horizontal flex-wrap"> <li class="list-group-item">Lorem Ipsum</li> <li class="list-group-item">Lorem Ipsum</li> <li class="list-group-item">Lorem Ipsum</li> <li class="list-group-item">Lorem Ipsum</li> <li class="list-group-item">An item</li> <li class="list-group-item">A second item</li> <li class="list-group-item">A third item</li> <li class="list-group-item">An item</li> <li class="list-group-item">A second item</li> <li class="list-group-item">A third item</li> </ul>

Answer 2

This way the border and the rows and columns will be perfect.

<ul class="list-group list-group-horizontal row">
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
</ul>