实现Bootstrap列屏幕缩小时自适应收缩，避免垂直堆叠

首先，咱们来分析下你遇到的问题：你用的col-lg-*栅格类只在屏幕宽度≥1200px的大屏幕下生效，当屏幕尺寸小于这个阈值时，这些列会失去设定的宽度，默认变成块级元素（100%宽度），自然就垂直堆叠了。要实现「收缩适配」而不是堆叠，咱们可以从这几个方向入手：

方案1：添加全尺寸栅格类（Bootstrap 3/4通用思路） #

Bootstrap栅格是「移动优先」（Bootstrap 3是桌面优先但支持移动类，Bootstrap 4+彻底移动优先），所以你需要给列添加针对小屏幕的栅格类，让它在所有尺寸下都保持固定比例宽度：

示例代码（Bootstrap 3） #

<div class="row">
  <!-- 外层容器：大屏幕居中，小屏幕占满宽度 -->
  <div class="col-lg-6 col-lg-offset-3 col-xs-12 col-xs-offset-0">
    <!-- 内部列：所有屏幕都占1/3宽度 -->
    <div class="col-lg-4 col-xs-4 headerBlock">
      <i class="headericon blackicon img-responsive fa fa-code"></i>
      <br/>
      <kbd class="headingkbd">Heading 1</kbd>
    </div>
    <div class="col-lg-4 col-xs-4 headerBlock">
      <!-- 你的第二个区块内容 -->
    </div>
    <div class="col-lg-4 col-xs-4 headerBlock">
      <!-- 你的第三个区块内容 -->
    </div>
  </div>
</div>

示例代码（Bootstrap 4+） #

Bootstrap 4+用col-*代替col-xs-*，同时支持flex布局：

<div class="row">
  <div class="col-lg-6 offset-lg-3 col-12">
    <div class="row">
      <div class="col-lg-4 col-4 headerBlock">
        <i class="headericon blackicon img-fluid fa fa-code"></i>
        <br/>
        <kbd class="headingkbd">Heading 1</kbd>
      </div>
      <div class="col-lg-4 col-4 headerBlock">
        <!-- 你的第二个区块内容 -->
      </div>
      <div class="col-lg-4 col-4 headerBlock">
        <!-- 你的第三个区块内容 -->
      </div>
    </div>
  </div>
</div>

原理：col-xs-4（或col-4）会让列在所有屏幕尺寸下都占据父容器的1/3宽度（12栅格系统中，4/12=1/3），屏幕变小时，列会自动按比例收缩，不会堆叠。

方案2：用Flex布局强制不换行（更灵活） #

如果不想固定列的宽度比例，而是希望它们根据内容自适应收缩，同时不堆叠，可以利用Flex布局的flex-wrap: nowrap属性：

步骤1：添加自定义CSS #

/* 强制行内元素不换行 */
.row.no-wrap {
  display: flex;
  flex-wrap: nowrap;
}

/* 让每个区块平均分配宽度，同时允许内容收缩 */
.headerBlock {
  flex: 1;
  min-width: 0; /* 关键：允许内容超出时收缩，避免撑破容器 */
  /* 可选：如果内容过长，添加省略号处理 */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

步骤2：修改HTML结构 #

<div class="row">
  <div class="col-lg-6 col-lg-offset-3">
    <!-- 给内部row添加自定义类no-wrap -->
    <div class="row no-wrap">
      <div class="col-lg-4 headerBlock">
        <i class="headericon blackicon img-responsive fa fa-code"></i>
        <br/>
        <kbd class="headingkbd">Heading 1</kbd>
      </div>
      <div class="col-lg-4 headerBlock">
        <!-- 你的第二个区块内容 -->
      </div>
    </div>
  </div>
</div>

原理：flex-wrap: nowrap强制row内的所有列在同一行排列，flex:1让每个列平分可用宽度，min-width:0解决了Flex容器中内容无法收缩的问题。

注意事项 #

• 如果列内有固定宽度的元素（比如图片、长文本），记得给这些元素添加max-width:100%（Bootstrap的img-responsive/img-fluid已经做了这个处理），避免撑破列容器。
• 如果你用的是Bootstrap 5，语法和Bootstrap 4基本一致，只需要注意偏移类从offset-lg-*变成offset-*（移动优先）。

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