如何用Bootstrap 4创建列宽不固定的响应式两栏布局

嘿，这个需求其实完全可以借助Bootstrap 4的flexbox工具类来实现，不用局限于传统的固定比例网格列。下面是具体的实现方案：

核心思路 #

Bootstrap 4本身基于flexbox构建，我们可以直接利用它的弹性布局工具类：

• 用d-flex把父容器设置为弹性盒，让子元素可以灵活分配空间
• 左侧栏放置图片，宽度由图片自身尺寸决定（或者你可以给图片设置固定宽度）
• 右侧栏添加flex-grow-1类，让它自动填充父容器的剩余宽度

完整代码示例 #

<div class="container my-4">
  <!-- 弹性容器，垂直居中对齐可选 -->
  <div class="d-flex align-items-center">
    <!-- 左侧图片：用img-fluid保证响应式缩放，mr-3添加右侧间距 -->
    <img src="你的图片地址" alt="描述文本" class="img-fluid mr-3">
    
    <!-- 右侧自适应栏：flex-grow-1让它占满剩余空间 -->
    <div class="flex-grow-1 p-3 bg-light">
      <h3>右侧自适应内容</h3>
      <p>这里的内容会自动填充父容器除了图片之外的所有剩余宽度，不管图片是宽是窄都能适配。</p>
      <p>在小屏幕设备上，你还可以添加响应式类让布局堆叠，比如下面会提到的flex-sm-column。</p>
    </div>
  </div>
</div>

关键细节说明 #

• d-flex：将父元素转换为弹性容器，这是实现自适应布局的基础
• flex-grow-1：给右侧栏设置这个类后，它会自动占据弹性容器中未被其他元素占用的空间，完全符合你要的“自适应填充剩余宽度”需求
• img-fluid：让图片在响应式场景下自动缩放，避免超出容器宽度；如果你希望图片保持固定宽度，去掉这个类直接给图片设置width样式即可
• align-items-center：可选类，用来让图片和右侧内容垂直居中对齐，根据你的需求决定是否添加

响应式优化：小屏幕堆叠布局 #

如果希望在小屏幕（比如屏幕宽度小于576px）时，图片和内容栏垂直堆叠，可以给父容器添加flex-sm-column类，修改后的容器代码如下：

<div class="d-flex flex-sm-column align-items-center">

这样在大屏幕上是横向两栏，小屏幕下自动变成上下堆叠，体验更友好。

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