求助：如何实现响应式行布局，移动端垂直排列且保留样式

嘿，我看了你的代码，发现几个小问题导致你的响应式布局没达到预期，我们一步步来修复它，同时保留你想要的盒子样式：

首先，梳理下现有代码的核心问题： #

• 重复使用ID：HTML里ID是唯一标识，你多次用了#caixas和#caixas2，浏览器只会识别第一个匹配的ID，后面的盒子样式会失效或冲突。
• 列断点配置不全：你只设置了col-lg-4和col-sm-6，但移动端（小于576px的屏幕）没指定列宽度，无法自动触发垂直排列。
• 不必要的container嵌套：列内部用container会额外添加左右padding，打乱你自定义的盒子内边距，完全没必要。

修正后的完整代码： #

CSS 部分（把ID改成class，优化样式）：

/* 替换重复ID为class，确保所有盒子都能应用样式 */
.caixas { 
  background-color: #58373791; 
  padding: 5px 30px 5px 25px; /* 简写padding，顺序：上、右、下、左 */
}

.caixas2 { 
  background-color: #b6696a91; 
  padding: 5px 30px 5px 25px;
}

#border { 
  border: solid 3px red; 
  padding: 1rem; /* 给外层边框容器加内边距，避免内容贴边框 */
}

/* 统一文本居中，替代HTML中的align属性，更符合语义化 */
.h2sm, .h1sm, .h3sm {
  text-align: center;
  margin: 0.5rem 0; /* 给标题加少量间距，视觉更舒适 */
}

HTML 部分（调整列断点，修正嵌套问题）：

<div class="container">
  <div id="border" class="p-3"> <!-- 用p-3替代冗余的col-lg-12，结构更简洁 -->
    <div class="row g-4"> <!-- g-4是Bootstrap的 gutter 类，控制列之间的间距，比单独加mb-4更均匀 -->
      <!-- col-12 确保移动端（<576px）垂直排列，col-md-6中等屏幕两列，col-lg-4大屏幕三列 -->
      <div class="col-lg-4 col-md-6 col-12">
        <div class="caixas">
          <h3 class="h2sm">Estudante </h3>
          <h4 class="h1sm">Português</h4>
        </div>
        <div class="caixas2">
          <h3 class="h3sm">Portuguese Student</h3>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-12">
        <div class="caixas">
          <h3 class="h2sm">Estudante </h3>
          <h4 class="h1sm">Internacional</h4>
        </div>
        <div class="caixas2">
          <h3 class="h3sm">Internacional Student</h3>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-12">
        <div class="caixas">
          <h3 class="h2sm">Estudante </h3>
          <h4 class="h1sm">Intercâmbio</h4>
        </div>
        <div class="caixas2">
          <h3 class="h3sm">Exchange Student</h3>
        </div>
      </div>
    </div>
  </div>
</div>

关键改动说明： #

1. ID转Class：把#caixas和#caixas2改成.caixas和.caixas2，确保所有盒子都能正确应用样式，避免ID冲突。
2. 响应式列配置：添加col-12（Bootstrap 4+写法），确保移动端每个列占满100%宽度，自动垂直排列；col-md-6让中等屏幕显示两列，col-lg-4大屏幕显示三列，完美适配不同设备。
3. 简化嵌套结构：去掉列内部的container，避免额外padding干扰；外层用p-3给边框容器加内边距，让内容和边框保持合适距离。
4. 优化样式细节：统一文本居中，给标题加少量margin，让盒子内部布局更美观；用Bootstrap的g-4控制行内列的间距，比单独加mb-4更均匀。

如果你的项目用的是Bootstrap 3，只需要把col-12改成col-xs-12即可，其他逻辑不变。

内容的提问来源于stack exchange，提问作者João Almeida