Bootstrap 3 CSS导致div高度为零

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。Bootstrap 3 是该框架的一个版本，广泛用于各种网页设计中。CSS（层叠样式表）是用于描述 HTML 或 XML 文档样式的样式表语言。

类型

Bootstrap 3 主要包含以下几类组件和工具：

网格系统：用于创建响应式布局。
排版：提供了一套预定义的字体、颜色和间距。
表单：提供了各种表单控件和验证。
导航：包括导航栏、标签页、面包屑等。
警告和提示：用于向用户显示信息、警告和错误。

应用场景

Bootstrap 3 适用于各种需要快速开发响应式网站的场景，包括但不限于：

企业官网
电商平台
社交媒体平台
个人博客

问题分析

当使用 Bootstrap 3 时，有时会遇到 div 高度为零的问题。这通常是由于以下原因之一：

CSS 冲突：其他 CSS 样式覆盖了 Bootstrap 的样式。
浮动元素：如果 div 内部有浮动元素，可能会导致高度塌陷。
未正确使用 Bootstrap 类：可能没有正确使用 Bootstrap 提供的类来设置高度。

解决方法

1. 检查 CSS 冲突

确保没有其他 CSS 样式覆盖了 Bootstrap 的样式。可以通过浏览器的开发者工具检查 div 的实际样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 3 Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        /* 确保没有其他样式覆盖 Bootstrap 样式 */
        .my-div {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 my-div">
                This is a div with Bootstrap 3.
            </div>
        </div>
    </div>
</body>
</html>

2. 清除浮动

如果 div 内部有浮动元素，可以使用 clearfix 类来清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 3 Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 clearfix my-div">
                <div style="float: left;">Float Left</div>
                <div style="float: right;">Float Right</div>
            </div>
        </div>
    </div>
</body>
</html>

3. 正确使用 Bootstrap 类

确保正确使用 Bootstrap 提供的类来设置高度。例如，可以使用 height 或 min-height 类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 3 Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 my-div">
                This is a div with Bootstrap 3.
            </div>
        </div>
    </div>
    <style>
        .my-div {
            min-height: 200px; /* 设置最小高度 */
        }
    </style>
</body>
</html>