如何让Bootstrap的col-auto每行最多显示3个元素？

col-auto 十分实用，它能根据元素尺寸将其适配在同一行显示。但我需要严格限制每行最多显示3个元素，即每行仅能有1-3个元素。

当前代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="col-sm-12 col-xs-12 col-lg-4 col-md-6 col-xl-4 col-xxl-4 d-flex align-items-stretch">
  <div class="card border-primary mb-3 mt-2 bg-transparent text-white_disabled w-100">
    <div class="card-header bg-transparent font-weight-500">
      Languages
    </div>
    <div class="card-body">
      <div class="row">
        <li class="col-auto text-nowrap">Rust</li>
        <li class="col-auto text-nowrap">Python</li>
        <li class="col-auto text-nowrap">PHP</li>
        <li class="col-auto text-nowrap">Java</li>
        <li class="col-auto text-nowrap">C</li>
        <li class="col-auto text-nowrap">C++</li>
        <li class="col-auto text-nowrap">Golang</li>
        <li class="col-auto text-nowrap">Kotlin</li>
        <li class="col-auto text-nowrap">Javascript</li>
      </div>
    </div>
  </div>
</div>

当前效果 #

期望效果 #

解决方案 #

要实现每行最多3个元素的需求，直接给外层row元素添加row-cols-3类即可，Bootstrap会自动让每行固定容纳3个元素，完美匹配你的要求。

修改后的代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="col-sm-12 col-xs-12 col-lg-4 col-md-6 col-xl-4 col-xxl-4 d-flex align-items-stretch">
  <div class="card border-primary mb-3 mt-2 bg-transparent text-white_disabled w-100">
    <div class="card-header bg-transparent font-weight-500">
      Languages
    </div>
    <div class="card-body">
      <div class="row row-cols-3">
        <li class="text-nowrap">Rust</li>
        <li class="text-nowrap">Python</li>
        <li class="text-nowrap">PHP</li>
        <li class="text-nowrap">Java</li>
        <li class="text-nowrap">C</li>
        <li class="text-nowrap">C++</li>
        <li class="text-nowrap">Golang</li>
        <li class="text-nowrap">Kotlin</li>
        <li class="text-nowrap">Javascript</li>
      </div>
    </div>
  </div>
</div>

补充说明 #

• row-cols-3是Bootstrap内置布局类，专门用来控制每行的子元素数量；
• 可以移除每个li上的col-auto，因为row-cols-*会自动为子元素分配合适宽度；
• 如果需要响应式适配不同屏幕，比如移动端每行1个、平板每行2个，可叠加使用row-cols-sm-2 row-cols-md-3这类组合类。

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