Bootstrap 使所有列等于最大 col-auto 宽度

Posted 2023-03-21

【中文标题】Bootstrap 使所有列等于最大 col-auto 宽度

【英文标题】：Bootstrap make all columns equal to largest col-auto width

【发布时间】：2021-12-18 03:21:03

【问题描述】：

我正在使用 Bootstrap 的网格系统。我的网格有多行，其中第一列设置为 col-auto 以包装其内容（不同长度）。有没有办法使每行第一列的宽度等于该列所需的最大宽度？

例如，如果我有：

<div class="container-fluid">
   <div class="row">
      <div class="col-auto">short col</div>
      <div class="col">other stuff</div>
   </div>
   <div class="row">
      <div class="col-auto">clearly the longest column</div>
      <div class="col">other stuff</div>
   </div>
   <div class="row">
      <div class="col-auto">medium column</div>
      <div class="col">other stuff</div>
   </div>   
</div>

我希望所有具有 col-auto 类的列都是最长列的长度。

【问题讨论】：

我看到的唯一能准确实现您所要求的方法是使用 JS 根据 col X 的宽度（最长）为所有列动态注入样式，但我不会这样做。

【参考方案1】：

为什么不在这里使用相对值而不是 BS 库。

.row .col-auto 
width:33%;
border:1px solid black;

<div class="container-fluid">
   <div class="row">
      <div class="col-auto">short col</div>
      <div class="col">other stuff</div>
   </div>
   <div class="row">
      <div class="col-auto">clearly the longest column</div>
      <div class="col">other stuff</div>
   </div>
   <div class="row">
      <div class="col-auto">medium column</div>
      <div class="col">other stuff</div>
   </div>   
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

【讨论】：

如果您要这样做，为什么不使用正确的 Bootstrap 列类。因此，将 col-auto 更改为 col-4 - 其宽度已设置为 33%

@zgood - 我同意。我最初使用 col-*，但想使用 col-auto 以避免不必要的空白。不过，我可能只需要处理它。