我在我的应用程序中使用了 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 to 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 高的框。
谁能看出我哪里出错了?
最佳答案
将类 clearfix
添加到您的 outlined-div
这将清除 Bootstrap 添加的 float 以创建列布局。
要了解有关 clearfixes 的更多信息,请阅读以下问题:What is a clearfix?
关于html - 高度自动不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38646310/