高さ自動動作しません

Question

bootstrapと私のアプリで基本CSSを使用していて、何らかの理由でdivのheight-autoが機能しません。 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 --> 

ここoutlined-divのための私のCSSです：

.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

これは、列のレイアウトを作成するために、ブートストラップによって追加フロートをクリアしますあなたのoutlined-div

にクラスclearfixを追加します。

clearfixの詳細については、What is a clearfix?