Container容器

Bootstrap原生带三种container宽度规范：

.container，居中，适配不同的断的max-width尺寸
.container-fluid，全屏，适配屏幕的width:100%尺寸
.container-{断点规格}（见下表，如container-sm），在指定规格断上width：100%尺寸

4、下面的表格描述了container在不同屏幕的max-width规范，以及.container、.container-fluid的断点区别

.container 超小屏幕 <576px

.container-sm 小屏幕 >=576px

.container-md 中等屏幕 >=768px

.container-lg 大屏幕 >=992

.container-xl 超大屏幕 >=1200px

.container-fluid 100%

5、All-in-one（一个容器的定义）

默认的.container class是一个响应式容器，它有固定宽度和最max-width设置，并支持响应式断点，你应该用它作为整个DIV的最外层容器，如下

</div>

6.流式布局

.container-fluid则支持全屏的流式布局，如下使用

...

</div>

7.响应式外部容器

Bootstrap v4.5带来了一组全新的响应式外部容器，它允许在指定的屏幕下定义100%宽（这更适合移动等场景）max-width属性会在不断的断点有表现不同，比如.container-sm则只在sm屏幕下显示100%宽，其它断点包括.container-md、.container-lg、.container-xl、代码示任免：

<div class="container-sm">100% wide until small breakpoint</div>

<div class="container-md">100% wide until medium breakpoint</div>

<div class="container-lg">100% wide until large breakpoint</div>

<div class="container-xl">100% wide until extra large breakpoint</div>

.container容器可以被嵌套，但是大多数布局并不需要这么做（最少层次的嵌套构建出的网页更优雅），其呈现效果和使用方法如下所示：

...

</div>

使用.container-fluid类，可以使div宽度扩展到整个宽度（如果没有其它CSS容器包含，则应是浏览器运行时的宽度，否则是父容器中允许的最大宽度，一般视为100%宽度），示例效果和代码使用方法如下：

...

</div>

希望可以帮助到你们。

以上就是我的分享，都是一些很基本的内容，新手上路，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

Container容器相关推荐

对于 codec(编解码器) 和 container(容器) 的理解
下面是关于视频编辑中一个最复杂的主题.由于部分标准化的缺失.混乱的市场推广以及文件名后缀,很多人搞不懂 codec (编解码器) 和 container (容器) 文件格式之间有啥区别. ...
android 容器圆角,flutter Container容器实现圆角边框
本文实例为大家分享了flutter Container容器实现圆角边框的具体代码,供大家参考,具体内容如下在这里使用 Container 容器来实现圆角矩形边框效果 1 圆角矩形边框 Contain ...
css container 容器查询
@container 容器查询的作用假如要求一个元素在宽度小于400px的文字缩小为14px,大于400px时文字为20px,通常的做法是通过媒体查询,根据浏览视口的来做.如果要求视口不变时也达到这 ...
Centos7.6部署docker容器虚拟化平台（Container 容器端口映射）
Docker的概述: 实验环境: Centos 7.6版本 Dcoker 概述 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 ...
浅尝Windows Server 2016——Container 容器：部署
容器上手其实挺快的,特别是在熟悉的Windows环境下.起步无非这么几件事: 1.安装Container Feature,容器功能角色可以使用UI,当然也可以用PowerShell: Install ...
Flutter Container 容器以及对齐方式 Alignment
Container 题记:不到最后时刻,千万别轻言放弃,无论结局成功与否,只要你拼博过,尽力过,一切问心无愧. 目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒 [x1] ...
php容器概念,深入thinkphp5.1之Container容器
作为tp框架或者说任何一种框架的核心思想,container类基本上算是框架的灵魂所在. 不得不说的注册树在thinkphp框架中实现容器概念的无非是:注册树模式+单例模式的结合,单例模式咱就不进行 ...
第7章页面布局-Container容器布局
防采集标记:亢少军老师的课程和资料 import 'package:flutter/material.dart';void main() => runApp(new MaterialApp(ti ...
Flutter笔记（7）Container容器布局
Container概述 Container在flutter太常见了,官方给出的是一个结合了绘制Widget(padding).定位Widget(positioning)以及尺寸Widget(sizin ...

Container容器

Container容器相关推荐

最新文章

热门文章