Bootstrap列布局适配：小屏时技能块需并排于简介下方

我来帮你搞定这个布局问题！你当前的核心问题是没有正确使用Bootstrap的栅格系统类，导致列的行为不符合预期。下面是调整后的完整代码和详细说明：

调整思路 #

1. Intro区块：在中等及以上屏幕（≥768px）设置为占4列（col-md-4），小屏幕自动占满整行（默认12列）
2. Skills容器：在中等及以上屏幕设置为占8列（col-md-8），和Intro的4列组成完整的12列栅格
3. 单个Skill块：无论屏幕大小都设置为占4列（col-4），这样小屏幕下三个Skill块能并排显示，而不是堆叠

完整HTML代码 #

<div class="container">
  <div class="row">
    <div class="col text-center">HEAD</div>
  </div>
  <div class="row">
    <!-- Intro区块：中等屏幕占4列，小屏幕占满整行 -->
    <div class="col-md-4 col">
      INTRO
    </div>
    <!-- Skills容器：中等屏幕占8列 -->
    <div class="col-md-8 p-0">
      <!-- 单个Skill块：所有屏幕都占4列，实现并排 -->
      <div class="col-4 col m-0">SKILLS</div>
      <div class="col-4 col m-0">SKILLS</div>
      <div class="col-4 col m-0">SKILLS</div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      EDUCATION
    </div>
    <div class="col">
      EXPERIENCE
    </div>
  </div>
  <div class="row">
    <div class="col">OTHER</div>
  </div>
</div>

调整后的CSS（保留你的基础样式，优化小细节） #

.row {
  background: #f8f9fa;
  margin: 10px;
}
.col {
  border: solid 1px #6c757d;
  margin: 10px;
  min-width: 120px;
}
/* 修复Skills容器内的padding问题，避免间距冲突 */
.p-0 {
  padding: 0 !important;
}

效果说明 #

• 常规尺寸（≥768px）：Intro区块在左侧占1/3宽度，三个Skill块在右侧并排占剩余2/3宽度，符合你想要的第一个效果
• 小屏幕（<768px）：Intro区块占满整行，三个Skill块在下方并排显示（各占1/3宽度），完全匹配你的第二个需求

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