浏览器垂直缩放时Bootstrap列重叠问题求助

嘿，我看了你在练习Bootstrap响应式网页时遇到的问题——水平调整宽度没问题，但垂直缩放浏览器时中间列会和下面的区域重叠，咱们来搞定它！

问题根源 #

你给.col2和.pic-col设置了固定高度height: 60vh，这是核心问题。当浏览器垂直高度缩小到小于60vh时，列内的内容会直接溢出，和下面的Portfolio区域挤在一起。固定高度在响应式设计里很容易踩坑，因为它没法根据内容多少或视口变化自适应调整。

具体解决方案 #

• 替换固定高度为最小高度：把height改成min-height，这样列的高度至少保持60vh，但如果内容增多或者视口高度不足时，会自动扩展高度，避免溢出重叠：

  .col2{
    background-color: #cccccc;
    min-height: 60vh; /* 替换原有的height属性 */
  }
  .pic-col{
    background-color: #cccccc;
    min-height: 60vh; /* 同样替换 */
  }
  

• 修正!important的写法：你的.con2样式里!important位置不对，应该放在分号前面，否则不会生效：

  .con2{
    margin: 2rem auto 2rem auto !important;
  }
  

• 可选优化：给.col2添加内边距，避免文本贴在容器边缘，提升小视口里的阅读体验：

  .col2{
    background-color: #cccccc;
    min-height: 60vh;
    padding: 1rem; /* 添加内边距 */
  }
  

修改完成后，再垂直缩放浏览器试试，中间列会根据内容和视口高度自动调整，再也不会和下面的Portfolio区域重叠啦！

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