高度自动不工作

Question

我使用bootstrap和基本的CSS在我的应用程序和由于某种原因height-auto在div不起作用。即使div中有文本，高度也会显示为0。这里是我的html：

<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; 
} 

而这里的它是如何显示出来：

如果我把在一个固定的高度（例如height: 10px ）红线扩展成一个10px高的方框。

任何人都可以看到我要去哪里错了吗？

Answer 1

类clearfix添加到您的outlined-div

这将清除被引导加入到创建的列布局的浮动。

要了解有关clearfixes的更多信息，请阅读下面的问题：What is a clearfix?