Web开发新手求助：页面缩小时文本重叠问题（附HTML代码）

问题根源分析 #

从你的代码和截图来看，核心问题出在Bootstrap列断点设置不一致，以及小屏幕下文本容器宽度不足：

1. 第一个工作项的列用了col-md-1和col-md-2，仅在屏幕宽度≥768px（md断点）时生效，小屏幕下这些列会失去指定宽度，导致文本容器被挤压。
2. 第二个工作项用了col-sm-1和col-sm，断点为≥576px（sm），和第一个工作项的断点不统一，布局逻辑混乱。
3. 文本元素未设置合理的换行规则，宽度不足时直接重叠。

具体修复步骤 #

1. 统一列的断点设置
   把所有列的断点统一为sm，确保小屏幕下也有合理的宽度分配，修改后的代码如下：

   <div class="container-fluid contenedorExp">
     
     <div class="lineaSecundaria"></div>
   
     <div class="row fila d-flex">
       <div class="col-sm-1 align-self-top columnaImg">
         <img src="./img/mcdonalds.png" class="foto">
       </div>
       <div class="col-sm-11 d-flex flex-column">
         <p class="empleo">McDonald's</p>
         <p class="descripcion">Empleado</p>
         <p class="descripcion">dic - 2015 a mar - 2016</p>
       </div>
     </div>
   
     <div class="lineaSecundaria"></div>
   
     <div class="row fila d-flex">
       <div class="col-sm-1 align-self-top columnaImg">
         <img src="./img/rossi.png" class="foto">
       </div>
       <div class="col-sm-11">
         <p class="empleo">Rossi</p>
         <p class="descripcion">Cadete</p>
         <p class="descripcion">dic - 2018 a mar - 2020</p>
       </div>
     </div>
   </div>
   

2. 强制文本换行
   给.descripcion类添加CSS样式，确保长文本自动换行：

   .descripcion {
     white-space: normal;
     word-wrap: break-word;
   }
   

3. 优化布局（可选）
   利用浏览器开发者工具（F12）切换不同屏幕尺寸，实时调试布局；Bootstrap的列总和建议为12，比如col-sm-1+col-sm-11刚好填满一行，避免留白或溢出。

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