Bootstrap Jumbotron中@media查询失效，移动端布局异常求助

嘿，我发现你的问题啦！首先得说，你遇到的@media查询不生效，大概率是因为CSS里用了JavaScript风格的//注释——CSS只认/* */格式的注释，//会让后面的代码解析出错，你的媒体查询块直接被浏览器忽略了！这是第一个要解决的点。

接下来咱们一步步调整布局，实现你要的效果：

1. 修复注释问题，确保媒体查询生效 #

把CSS里的//The actual problem starts here:改成/* The actual problem starts here: */，这样浏览器才能正确识别后面的媒体查询规则。

2. 调整图片的对齐逻辑，适配移动端 #

原来的margin-left: 60%在桌面端能让图片靠右，但到了移动端（col变成100%宽度），这个值会让图片偏到右侧甚至超出容器。咱们可以优化一下：

• 桌面端：保持图片靠右的布局
• 移动端：让图片左对齐，同时和左侧文本块垂直方向上对齐（也就是去掉不必要的margin，让两个块自然堆叠）

修改后的CSS代码如下：

#about2 { 
  font-size: 35px; 
  margin-top: 50px; 
} 
#about-foto { 
  max-width: 70%; 
  border-radius: 10px; 
  margin-left: 60%; /* 桌面端靠右 */
} 

/* 修复注释，确保媒体查询生效 */
@media (max-width: 768px) { 
  #about-foto { 
    margin-left: 0; /* 移动端左对齐，替换5%更稳妥 */
    max-width: 100%; /* 可选：让图片占满容器宽度，更适配移动端 */
  }
  #about2 {
    margin-top: 0; /* 可选：去掉顶部margin，让两个块垂直间距更自然 */
  }
}

3. 可选：优化桌面端的垂直对齐 #

如果你希望桌面端两个col-md-6能垂直居中（而不是靠margin-top:50px强行偏移），可以给父级的row加上Bootstrap的flex类：

<div class="row align-items-center"> <!-- 添加align-items-center实现垂直居中 -->
  <div id="about2" class="col-md-6">
    <!-- 内容不变 -->
  </div>
  <div class="col-md-6">
    <!-- 图片不变 -->
  </div>
</div>

这样就不用给#about2加margin-top:50px了，布局会更灵活。

试试这些调整，应该就能解决你的对齐问题啦！

内容的提问来源于stack exchange，提问作者Mehmet Eyüpoğlu