如何使HTML横向列表填满整个col-6列容器？

要让横向列表填满整个col-6列，你可以通过Bootstrap内置工具类实现：

方案1：列表容器占满列宽，列表项平分空间 #

给<ul>添加w-100类让它宽度铺满父容器，再给每个<li>加flex-grow-1让它们平分可用空间，搭配text-center保持文字居中：

<div class="col-6">
  <ul class="list-group list-group-horizontal-xxl justify-content-center w-100">
    <li class="list-group-item flex-grow-1 text-center">Departman Onayında</li>
    <li class="list-group-item flex-grow-1 text-center">Bilgi verildi</li>
  </ul>
</div>

方案2：仅让列表容器占满列宽（列表项保留原宽度） #

如果不需要拉伸列表项，只需要整个列表铺满col-6，仅给<ul>添加w-100类即可：

<div class="col-6">
  <ul class="list-group list-group-horizontal-xxl justify-content-center w-100">
    <li class="list-group-item">Departman Onayında</li>
    <li class="list-group-item">Bilgi verildi</li>
  </ul>
</div>

原理说明 #

Bootstrap的list-group-horizontal-xxl会将列表转为flex容器，但默认宽度仅包裹内容。w-100类强制容器宽度为100%，铺满父级col-6；flex-grow-1让flex子项（列表项）自动填充剩余空间，实现平分效果。

内容的提问来源于stack exchange，提问作者Stick