Bootstrap v4卡片三Div响应式布局：A、B固定，C自适应移位

这个布局需求其实用Bootstrap 4自带的flex工具类或者栅格系统都能轻松搞定，我给你两种实用方案：

方案1：Flex布局（更灵活） #

利用Bootstrap的flex工具类，我们可以精准控制每个元素的换行逻辑：

<div class="card" style="width: 100%;">
  <div class="card-body d-flex flex-wrap">
    <!-- 元素A：固定在左上角，不收缩 -->
    <div class="A flex-shrink-0 p-3 bg-primary text-white" style="width: 120px;">
      核心元素A
    </div>
    <!-- 元素B：始终在A右侧，占据剩余空间 -->
    <div class="B flex-grow-1 p-3 bg-secondary text-white" style="min-width: 180px;">
      元素B
    </div>
    <!-- 元素C：宽屏时在B右侧，窄屏时换行到A下方 -->
    <div class="C w-100 w-md-auto p-3 bg-success text-white" style="width: 150px;">
      元素C
    </div>
  </div>
</div>

关键类说明： #

• d-flex flex-wrap：把卡片内容区变成flex容器，允许子元素空间不足时换行
• flex-shrink-0：让元素A保持固定宽度，不会被压缩变形
• flex-grow-1：让元素B自动占据A右侧的剩余空间，确保它始终和A在同一行
• w-100 w-md-auto：元素C在小屏幕（<768px）时占满整行，自动换行到下方；中等及以上屏幕时宽度自适应，和B并排在A右侧
• 自定义min-width给B：避免屏幕极窄时B被挤得太难看，保证基础可读性

方案2：栅格系统（更贴合Bootstrap规范） #

如果你习惯用Bootstrap的栅格来布局，这种方式也能实现需求：

<div class="card">
  <div class="card-body">
    <div class="row no-gutters">
      <!-- 元素A：宽屏时自适应宽度，始终在左侧 -->
      <div class="col-md-auto">
        <div class="A p-3 bg-primary text-white" style="width: 120px;">
          核心元素A
        </div>
      </div>
      <!-- 元素B：占据剩余空间，始终在A右侧 -->
      <div class="col">
        <div class="B p-3 bg-secondary text-white">
          元素B
        </div>
      </div>
      <!-- 元素C：宽屏时在B右侧，窄屏时占满整行 -->
      <div class="col-md-auto col-12">
        <div class="C p-3 bg-success text-white" style="width: 150px;">
          元素C
        </div>
      </div>
    </div>
  </div>
</div>

关键类说明： #

• row no-gutters：创建无间距的栅格行，避免默认列间距影响布局
• col-md-auto：让A和C在中等及以上屏幕时根据内容自适应宽度
• col：让B自动占据A右侧的剩余空间
• col-12：让C在小屏幕时占满整行，换行到A和B的下方

你可以根据自己的实际需求调整元素的宽度、断点（比如把md换成sm来提前触发换行），或者添加自定义样式优化间距和外观。

内容的提问来源于stack exchange，提问作者the.jxc