textarea与图片重叠问题：为何Bootstrap布局出现该异常？

问题原因 #

• 左侧列内容宽度溢出：使用Bootstrap col-md-6 在中等屏幕（≥768px）时占父容器50%宽度，但左侧列内upvote-section（带20px右外边距）+ 500px宽图片（带16px左外边距）的总宽度，超过了col-md-6的实际可用宽度（扣除列内padding后），导致内容溢出到右侧列，和textarea重叠。
• Flex容器未换行：左侧列设为d-flex，默认flex-wrap:nowrap，内部元素宽度超限后不会自动换行，强制在一行挤压，加剧溢出。
• 图片宽度未适配剩余空间：虽然图片加了img-fluid，但它的max-width:100%是相对于整个col-md-6的宽度，没有扣除upvote-section占用的空间，导致图片无法自适应剩余宽度。

修复方案 #

1. 开启Flex换行：给左侧列添加Bootstrap的flex-wrap类，让点赞区和图片在宽度不足时自动换行：

   <div class="col-md-6 d-flex align-items-center justify-content-center flex-wrap">
   

2. 让图片自适应剩余空间：给图片添加flex-grow:1和max-width限制，确保它只占用扣除点赞区后的剩余宽度：

   <img src="https://via.placeholder.com/500x300" alt="" class="img-fluid ml-3 flex-grow-1" style="max-width: calc(100% - 40px);">
   

3. 调整小屏幕布局：如果希望中等屏幕点赞区在图片左侧，小屏幕点赞区在图片上方，保留flex-wrap即可，Bootstrap会自动在小屏幕堆叠元素。

内容的提问来源于stack exchange，提问作者Carol.Kar