当前位置:   article > 正文

Container容器_tabler container-xl

tabler container-xl

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>

 

 

希望可以帮助到你们。

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/231629
推荐阅读
相关标签
  

闽ICP备14008679号