bootstrap4简单使用和入门03-响应式布局

最新推荐文章于 2025-06-26 15:39:29 发布

原创最新推荐文章于 2025-06-26 15:39:29 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了Bootstrap4响应式布局的原理，详细讲解了不同浏览器分辨率下div块的展示方式，确保在各种屏幕尺寸下都能提供良好的用户体验。从1200px到576px以下，依次调整为每行显示4、4、3、2、1个div块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

响应式布局的原理

页面源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>responsive</title>
    <link rel="stylesheet" type="text/css" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">
    <style type="text/css">
        .content > div{
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: #333;
            background: #cccccc;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- 网页内容在展示的时候，如果屏幕在某些极端情况下放大或者缩小而展示效果始终一样就会让内容无法显示完整
    bootstrap就出现了响应式布局，响应式布局就是解决这种问题产生的
    利用栅格系统适应在不同的分辨率下预设占据的列
    栅格系统一共12列，如下设置
    1.在浏览器的分辨率>=1200px时，则每个div块占据3列，即每行显示4个div块
    2.在浏览器的分辨率>=992px && <= =1200px时，则每个div块占据3列，即每行显示4个div块
    3.在浏览器的分辨率>=720px时，则每个div块占据4列，即每行显示3个div块
    4.在浏览器的分辨率>=576px时，则每个div块占据6列，即每行显示2个div块
    5.在浏览器的分辨率<576px时，则每个div块占据12列，即每行显示1个div块
    -->
    <div class="container">
        <div class="row">
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
        </div>
    </div>
</body>
</html>