Bootstrap 3 row div高度超出内部列内容的问题求助

我刚梳理了你遇到的问题：页面里的row div高度明显超过内部列的内容，明明没设置min-height却表现得像有最小高度，只有当子列填足够多内容时才恢复正常，还出现了大片空白。这种情况我碰到过好几次，大概率是CSS布局里的隐性规则或者元素默认行为搞的鬼，给你几个实用的排查方向和解决办法：

• 检查Flexbox/Grid的默认对齐行为
  如果这个row用了Flex布局，默认的align-items: stretch会强制子元素拉伸填满容器高度——哪怕子列里的内容根本没那么高。要是子列里有个空元素或者高度被拉伸的容器，直接就把row撑起来了。你可以先给row临时加个align-items: flex-start试试，看看多余高度会不会消失；或者在开发者工具里逐个检查子列的元素，看哪个被意外拉伸了。

• 排查浮动布局的 clearfix 问题
  要是row里的列用了浮动，之前的clearfix方案可能有坑。比如有些clearfix会给::after伪元素设不必要的height或者min-height，或者display属性写错导致伪元素占据额外空间。试试替换成标准的clearfix写法：

  .row::after {
    content: "";
    display: table;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  

• 解决子元素的margin溢出问题
  垂直方向的margin很容易“溢出”到父容器外面，把父容器的高度撑高。比如子列里第一个元素的margin-top或者最后一个元素的margin-bottom，会直接作用在row上。你可以给row加个overflow: hidden来触发BFC（块级格式化上下文），阻止margin溢出；或者用padding-top: 1px; margin-top: -1px的小技巧来“吃掉”溢出的margin。

• 排查隐性空白或伪元素
  有时候row里的看不见的空白字符、换行符（尤其是用inline-block布局时，这些会被当成空白节点占空间），或者第三方样式给row加了::before/::after伪元素，不小心设置了高度、padding或者content内容。你可以用浏览器开发者工具（F12）的Elements面板，逐个隐藏row的子元素和伪元素，看什么时候多余高度消失，就能精准定位问题。

• 覆盖隐性的浏览器默认/继承样式
  偶尔会有浏览器默认样式或者继承来的样式偷偷给row加了高度。你可以先给row加个测试样式：height: auto !important; min-height: 0 !important，如果多余高度消失了，再去Styles面板里找哪个样式在搞鬼——重点看继承来的样式和第三方CSS文件。

最后给个小技巧：用开发者工具的Elements面板选中那个有问题的row，然后在Styles面板里勾选/取消各个样式，实时看高度变化，比瞎猜快多了。

内容的提问来源于stack exchange，提问作者Zane Kinney