高度自動不工作

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?