Bootstrap--响应式布局

最新推荐文章于 2025-06-28 12:04:44 发布

原创最新推荐文章于 2025-06-28 12:04:44 发布 · 630 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端

前端专栏收录该内容

47 篇文章

订阅专栏

本文介绍了Bootstrap框架中的核心元素——容器（container）和流式布局容器（container-fluid），以及其栅格系统的工作原理。通过实例展示了当栅格列数之和不足或超过12时的布局效果，解释了位偏移和列排序的概念，并通过代码展示如何实现这些功能。内容包括：固定宽度的响应式布局、全宽度流式布局、栅格空白处理、位偏移和列排序的应用。

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

1、Bootstrap需要为页面内容和栅格系统包裹一个container容器

（1）.container类：响应式布局的容器，宽度固定

（2）.container-fluid类：流式布局容器，宽度百分比

2、Bootstrap栅格系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row {
            background: yellow;
        }
        .row>div:nth-child(1) {
            background-color: pink;
        }
        .row>div:nth-child(2) {
            background-color: blue;
        }
        .row>div:nth-child(3) {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4">1</div>
            <div class="col-lg-4">2</div>
            <div class="col-lg-4">3</div>
        </div>
    </div>
</body>
</html>

运行结果：

（1）如果份数之和不足十二，占不满container，会有空白（黄色为未占满的空白部分）

<div class="container">
        <div class="row">
            <div class="col-lg-4">1</div>
            <div class="col-lg-4">2</div>
            <div class="col-lg-1">3</div>
        </div>
    </div>

（2）如果份数之和大于十二，多余的份数会另起一行（黄色为未占满的空白部分）

<div class="container">
        <div class="row">
            <div class="col-lg-4">1</div>
            <div class="col-lg-4">2</div>
            <div class="col-lg-6">3</div>
        </div>
    </div>

3、Bootstrap位偏移（黄色为未占满的空白部分）

    <!-- 位偏移前 -->
    <div class="container">
        <div class="row">
            <div class="col-lg-4">1</div>
            <div class="col-lg-4">2</div>
        </div>
    </div>

    <!-- 位偏移后  -->
    <div class="container">
        <div class="row">
            <div class="col-lg-4">1</div>
            <div class="col-lg-4 col-lg-offset-4">2</div>
        </div>
    </div>

4、Bootstrap列排序（黄色为未占满的空白部分）

.col-md-push-*和.col-md-pull-*类可以改变列的排序

    <!-- 未排序前  -->
    <div class="container">
        <div class="row">
            <div class="col-lg-4">1</div>
            <div class="col-lg-8">2</div>
        </div>
    </div>

    <!-- 排序后  -->
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-push-8">1</div>
            <div class="col-lg-8 col-md-pull-4">2</div>
        </div>
    </div>