Container容器

Container容器

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

1. .container，居中，适配不同的断的max-width尺寸
2. .container-fluid，全屏，适配屏幕的width:100%尺寸
3. .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 class="container">

  <!-- 网页内容写在这里面 -->

</div>

 

6.流式布局

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

<div class="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 class="container-fluid">

  ...

</div>

 

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

 

<div class="container-fluid">

  ...

</div>

 

 

希望可以帮助到你们。

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