row-fluid布局窄屏下固定高度容器链接截断问题求解

出现窄屏内容截断，核心是两处CSS设置问题：

• 你给.footerlinks容器设置了固定高度height: 160px，屏幕宽度缩小时，四个导航项会自动折行排列，内容总高度超过160px后，超出容器范围的部分就会被截断
• 你用的Bootstrap 2框架中，row-fluid下的span*类默认是浮动布局，父容器如果没有做清除浮动处理，本身无法正确被子元素撑开高度，会进一步加剧内容溢出问题

1. 修改.footerlinks的固定高度为最小高度，同时补充清除浮动、盒模型规则，替换原有样式即可：

.footerlinks {
  text-align: center;
  min-height: 160px; /* 替换原有的height:160px，桌面端保持原有视觉高度，窄屏可随内容自动增高 */
  vertical-align: middle;
  padding: 40px;
  font-family: Arial;
  font-size: 20px;
  overflow: hidden; /* 清除子元素span3的浮动，让父容器能正确计算内容高度 */
  box-sizing: border-box; /* 让内边距纳入容器总宽度计算，避免出现横向溢出滚动条 */
}

2. 可选优化：如果希望窄屏下折行的导航项之间有更舒适的间距，可以补充一段响应式样式：

@media (max-width: 767px) {
  .footerlinks .span3 {
    padding: 12px 0;
  }
}

修改完成后，桌面端展示效果和你之前的预期完全一致，窄屏下容器会随折行的导航内容自动撑开高度，不会再出现后两个链接被截断的问题。

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