码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 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

     

  • 相关阅读:
    601-体育馆的人流量
    安装docker,docker-compose
    常用、热门、免费的API接口应有尽有...
    react老项目 升级react-router
    vulnhub BTRSys: v2.1
    怎么使用Cpolar+Lychee搭建私人图床网站并实现公网访问?
    Vue基础语法【上】
    2022年4月最新面经答案总结(Java基础、数据库、JVM、计网、计操、集合、多线程、Spring)持续更新
    字符串常用方法(1)
    论文阅读-A General Language for Modeling Social Media Account Behavior
  • 原文地址:https://blog.csdn.net/T0620514/article/details/128158311
  • 最新文章
  • 沪漂五周年了:我越来越迷茫了
    Agentic Skill Routing 实战:别再把所有 Skill 塞进 AI Agent 上下文
    MySQL-Seconds_behind_master的精度误差
    [MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
    AI的至暗历史:从万众期待到被政府撤资,AI的两次死亡徘徊
    Agent OS :五种驯服不确定性的范式
    PortSwigger SQL注入LAB11
    数据库即时编译JIT
    [Begin]AI Learn Data Day 0
    深度学习进阶(二十七)现代 LLM 的核心架构设计其二:SwiGLU
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号