Bootstrap col-auto 不应连续超过 3 个元素

Question

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>

当前 Output

预计 Output

Answer 1

那么，为什么不直接明确列的大小呢？

仅供参考， col-sm-12 col-xs-12 col-lg-4 col-md-6 col-xl-4 col-xxl-4可以简化为col-xs-12 col-md-6 col-lg-4 。 阅读Bootstrap 的移动优先理念。

此外，您的列表标记无效。 列表项必须是列表元素的子项。

哦，这只是“开始”。 Golang 是域名，不是语言。

 <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-xs-12 col-md-6 col-lg-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"> <ul class="row"> <li class="col-4 text-nowrap">Rust</li> <li class="col-4 text-nowrap">Python</li> <li class="col-4 text-nowrap">PHP</li> <li class="col-4 text-nowrap">Java</li> <li class="col-4 text-nowrap">C</li> <li class="col-4 text-nowrap">C++</li> <li class="col-4 text-nowrap">Go</li> <li class="col-4 text-nowrap">Kotlin</li> <li class="col-4 text-nowrap">Javascript</li> </ul> </div> </div> </div>