html - 高度自动不工作

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

将类 clearfix 添加到您的 outlined-div

这将清除 Bootstrap 添加的 float 以创建列布局。

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