CSS制作餐厅菜单分类时描述区块堆叠在图片区块问题排查

你可能遗漏的配置及对应解决方案 #

• 缺失响应式基础配置
  需在页面<head>标签内添加Bootstrap必需的viewport元标签，否则所有响应式类不会正常生效：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  同时确认Bootstrap核心CSS文件引入路径正确，无加载失败问题。
• Bootstrap版本不匹配
  你提供的代码使用的是Bootstrap 3的类名规则，col-sm-*、img-responsive、visible-xs均为Bootstrap 3专属类。如果当前项目引入的是Bootstrap 4/5版本，会直接导致布局失效。可以选择换回Bootstrap 3.x版本，或者对应调整类名：
  • img-responsive 替换为 img-fluid
  • visible-xs 替换为 d-block d-sm-none
  • 如需极小屏幕下也保持左右布局，将col-sm-5/col-sm-7替换为col-5/col-7（Bootstrap 4/5中xs断点类无需加xs后缀）
• 测试视口宽度低于sm断点阈值
  Bootstrap 3的sm断点触发条件为视口宽度≥768px，若在宽度小于768px的窗口下测试，col-sm-*类会默认变为100%宽度导致堆叠，属于正常表现。如果要在小于768px的窗口下也保持图片和描述左右并排，将对应列的类名从col-sm-5/col-sm-7改为col-xs-5/col-xs-7即可。
• 自定义样式冲突
  检查自定义CSS代码中，是否给menu-item-photo、menu-item-description或对应的列元素设置了width:100%、float:none、display:block这类会覆盖栅格布局的属性，如有相关规则删除或调整即可。

内容的提问来源于stack exchange，提问作者Rex.august