如何在Bootstrap 4中创建stretch-auto-auto列布局？能否用列替代浮动实现？

当然可以用Bootstrap 4的网格系统轻松实现这种布局，而且完全不需要依赖浮动——毕竟Bootstrap 4的网格是基于Flexbox构建的，天生就适合处理这种弹性布局需求！

核心思路 #

所谓的"stretch-auto-auto"布局，通常指的是一行内：

• 第一列拉伸占据所有剩余空间
• 后两列宽度由自身内容决定（自适应）

利用Bootstrap的内置类就能直接实现，不用写额外CSS。

实现代码示例 #

<div class="container mt-4">
  <div class="row">
    <!-- 拉伸列：占据剩余空间 -->
    <div class="col flex-grow-1 bg-light p-3">
      我会拉伸填满行里剩下的所有空间，不管内容多少！
    </div>
    <!-- 自适应列1：宽度随内容变化 -->
    <div class="col-auto bg-warning p-3">
      自适应宽度1
    </div>
    <!-- 自适应列2：宽度随内容变化 -->
    <div class="col-auto bg-info p-3">
      自适应宽度2（更长的内容也能撑宽）
    </div>
  </div>
</div>

关键类说明 #

• .row: 作为Flex容器，里面的列默认是Flex项
• .flex-grow-1: 给第一个列添加这个类，让它在Flex容器中占据所有剩余可用空间，实现"stretch"效果
• .col-auto: 后两列用这个类，告诉列的宽度由内部内容决定，自动收缩/扩展以适配内容

高度方向的stretch-auto-auto（可选） #

如果你的需求是高度上的拉伸（第一列占满容器高度，后两列高度随内容），也可以通过Flex对齐类实现：

<!-- 给容器设置固定高度作为示例 -->
<div class="container mt-4" style="height: 300px;">
  <div class="row align-items-start h-100">
    <!-- 高度拉伸列 -->
    <div class="col h-100 bg-light p-3">
      我会拉伸到整个容器的高度
    </div>
    <!-- 高度自适应列 -->
    <div class="col-auto bg-warning p-3">
      我的高度随内容走<br>比如这样的多行内容
    </div>
    <div class="col-auto bg-info p-3">
      我也是高度自适应
    </div>
  </div>
</div>

这里的关键是.align-items-start让列的顶部对齐，.h-100让第一列高度占满行的高度，从而实现高度方向的stretch-auto-auto。

总的来说，Bootstrap 4的Flexbox网格系统完美支持这种弹性布局，完全不需要用浮动来实现，代码简洁易维护~

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