• Bootstrap5 容器


    我们可以使用以下两个容器类:

    • .container 类用于固定宽度并支持响应式布局的容器。
    • .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。


    固定宽度

    .container 类用于创建固定宽度的响应式页面。

    注意:宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。

    超级小屏幕
    <576px
    小屏幕
    ≥576px
    中等屏幕
    ≥768px
    大屏幕
    ≥992px
    特大屏幕
    ≥1200px
    超级大屏幕
    ≥1400px
    max-width100%540px720px960px1140px1320px

    以下实例中,我们可以尝试调整浏览器窗口的大小来查看容器宽度在不同屏幕中等变化:

    Bootstrap5 .container 实例

    我的第一个 Bootstrap 页面

    这是一些文本。


    尝试一下 »

    注意:超级大屏幕 (≥1400px) 是 Bootstrap 5 新增加的, Bootstrap 4 最大的是特大屏幕 (≥1200px)。


    100% 宽度

    .container-fluid 类用于创建一个全屏幕尺寸的容器,容器始终跨越整个屏幕宽度(width 始终为 100%):

    Bootstrap5 .container-fluid 实例

    我的第一个 Bootstrap 页面

    使用了 .container-fluid,100% 宽度,占据全部视口(viewport)的容器。


    尝试一下 »


    容器内边距

    默认情况下,容器都有填充左右内边距,顶部和底部没有填充内边距。 Bootstrap 提供了一些间距类用于填充边距。 比如 .pt-5 就是用于填充顶部内边距:

    Bootstrap5 实例


    尝试一下 »


    容器的边框和颜色

    Bootstrap 也提供了一些边框(border)和颜色(bg-dark、bg-primary等)类用于设置容器的样式:

    Bootstrap5 实例


    尝试一下 »

    后面章节我们会详细说明这些样式。


    响应式容器

    你可以使用 .container-sm|md|lg|xl 类来创建响应式容器。

    容器的 max-width 属性值会根据屏幕的大小来改变。

    Class超小屏幕
    <576px
    小屏幕
    ≥576px
    中等屏幕
    ≥768px
    大屏幕
    ≥992px
    特大屏幕
    ≥1200px
    超级大屏幕
    ≥1400px
    .container-sm100%540px720px960px1140px1320px
    .container-md100%100%720px960px1140px1320px
    .container-lg100%100%100%960px1140px1320px
    .container-xl100%100%100%100%1140px1320px
    .container-xxl100%100%100%100%100%1320px

     

  • 相关阅读:
    二叉树的操作
    JavaScript基础知识-JS数据类型
    Linux系统中驱动格式基本实现
    大众集团「官宣」造芯计划,汽车芯片「玩法」大变样
    深度学习之基于Yolov5闯红灯及红绿灯检测系统
    Arm发布 Neoverse V2 和 E2:下一代 Arm 服务器 CPU 内核
    Spring 框架学习(四)---- 常用配置
    蓝桥杯 题库 简单 每日十题 day13
    技术管理进阶——技术Leader如何拒绝业务方?
    工作流调度系统Azkaban
  • 原文地址:https://blog.csdn.net/T0620514/article/details/128158311