Bootstrap 將列表元素包裝成 3 行

Question

我想使用一個<ul>將列表元素包裝到 3 列中

只是為了澄清我想要什么：

<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>

我嘗試使用row-cols-3但它不起作用。

這是它現在的樣子：

更新

#1

#2

#3

Answer 1

這是一個解決方案，感謝https://getbootstrap.com/docs/5.0/components/list-group/#horizo ntal 和@fabio.sang 在How to specify an element which to wrap in css flexbox? 上的評論？ . 為測試目的添加了更多li項目。

 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

這樣邊框和行列就完美了。

<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>