高度自动不起作用

Question

我在我的应用上使用8 Capabilities Unavailable和基本CSS，由于某种原因，div上的bootstrap无效。即使div中有文本，高度也显示为0。这是我的HTML：

height-auto

这是我<div class="container"> <div class="outlined-div"> <h2 class="text-center col-xs-12" style="color: red">Men are not born knowing how&nbsp;to&nbsp;barbecue.</h2> <div class="col-xs-12 col-sm-6"> <h4>Good luck explaining this to your buddies.</h4> <h4>All men are capable. Few are properly trained.</h4> <h4>Instead, we undergo years of trial and error, suffering through snide comments from our buddies and smug looks from our fathers-in-law. This ends now.</h4> </div> <div class="col-xs-12 col-sm-6"> <h4>While men don’t ask for directions (see the man code), it’s only right that we share hints, hacks, and other help with our fellow brothers.</h4> <h4>Give them a leg up in impressing others with our stellar barbecuemanship.</h4> <h2 style="color: red">Grill on, brothers.</h2> </div> </div> <!-- outlined-div --> </div> <!-- container --> 的css：

outlined-div

这就是它出现的方式：

如果我放入固定高度（例如.outlined-div { background-color: white; border: solid medium red; border-radius: 5px; padding-left: 15px; padding-right: 15px; height: auto !important; } ），红线会扩展为10px高的方框。

谁能看到我在哪里出错？

Answer 1

将班级clearfix添加到outlined-div

这将清除Bootstrap添加的浮点数以创建列布局。

要详细了解clearfixes，请阅读以下问题：What is a clearfix?