Bootstrap 4实现并排Div：如何设置其中一个为固定宽度？

嘿，这个需求在Bootstrap 4里用flex布局相关的工具类就能完美解决——毕竟Bootstrap 4的网格系统本身就是基于flexbox构建的，给你两种推荐的实现方式：

方式一：内联样式+Bootstrap工具类（快速实现） #

直接利用Bootstrap内置的flex-shrink-0确保固定宽度的div不会被压缩，再给它设置固定宽度，同时用flex-grow-1让第二个div占据剩余空间：

<div class="row">
  <!-- 固定140px宽度的div -->
  <div class="flex-shrink-0" style="width: 140px;">
    这里是固定宽度的内容
  </div>
  <!-- 自适应剩余宽度的div -->
  <div class="flex-grow-1 p-2">
    这里是自适应的内容，会占满row里除了140px之外的所有空间
  </div>
</div>

• flex-shrink-0：阻止第一个div在空间不足时被压缩，牢牢保持140px宽度
• flex-grow-1：让第二个div自动填充row容器的剩余宽度

方式二：自定义CSS类（更易维护） #

如果这个固定宽度的布局会在多个地方用到，建议封装一个自定义CSS类，避免重复写内联样式：

/* 在你的自定义样式文件中添加 */
.fixed-sidebar-140 {
  width: 140px;
  flex-shrink: 0;
}

然后在HTML中使用：

<div class="row">
  <div class="fixed-sidebar-140">
    固定宽度内容
  </div>
  <div class="flex-grow-1">
    自适应内容
  </div>
</div>

为什么不用传统的col类？ #

因为Bootstrap的col-*类是基于百分比的网格划分，没法直接设置固定像素宽度，而用flex的grow/shrink属性配合固定宽度，是Bootstrap 4中实现这种“固定+自适应”并排布局最贴合框架设计的方式，也能保证响应式下的表现符合预期。

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