Bootstrap 容器

  • 容器概述

    Bootstrap 还需要包含元素来包装站点内容。
    有两种容器类可供选择:
    • .container 类提供了一个响应式固定宽度容器
    • .container-fluid 类提供了一个全宽度的容器,横跨视口的整个宽度
    .container-fluid
    .container-fluid
  • 固定式容器

    使用 .container 类创建一个响应式,固定宽度的容器。
    请注意,其宽度(最大宽度)将在不同的屏幕尺寸上改变:
    特小屏幕
    <576px
    小屏幕
    ≥576px
    中等屏幕
    ≥768px
    大屏幕
    ≥992px
    特大屏幕
    ≥1200px
    max-width 100% 540px 720px 960px 1140px
    <div class="container">
       <h1>我是带有响应的固定宽度容器的bootstrap页面</h1>
       <p>这个是一个段落</p>
    </div>
    
    尝试一下
    可以点击尝试一下打开上面的示例,并调整浏览器窗口的大小,以查看容器宽度将在不同的断点处改变。
  • 全宽度的容器

    使用 .container-fluid 类创建一个全宽度的容器,该容器将始终跨越屏幕的整个宽度(宽度始终为100%):
    <div class="container-fluid">
       <h1>我是带有全角容器bootstrap页面</h1>
       <p>这个是一个段落</p>
    </div>
    
    尝试一下
  • 容器填充

    默认情况下,容器的左侧和右侧填充为15px,没有顶部或底部的填充。 因此,我们经常使用间距工具,例如额外的填充和边距,使它们看起来更好。 例如,.pt-3表示“添加16px的顶部填充”:
    <div class="container pt-3"></div>
    
    尝试一下
  • 容器边框和颜色

    边框和颜色在许多应用程序中,也经常与容器一起使用:
    <div class="container p-3 my-3 border"></div>
    <div class="container p-3 my-3 bg-dark text-white"></div>
    <div class="container p-3 my-3 bg-primary text-white"></div>
    
    尝试一下
    尝试一下输出结果:
    我的第一个Bootstrap页面
    此容器有边框和一些额外的填充和边距。
    我的第一个Bootstrap页面
    此容器具有深色背景颜色和白色文本,以及一些额外的填充和边距。
    我的第一个Bootstrap页面
    此容器具有蓝色背景色和白色文本,以及一些额外的填充和边距。
  • 响应式容器

    您还可以使用 .container-sm | md | lg | xl 类创建响应容器。
    容器的最大宽度将在不同的屏幕尺寸/视口上改变:
    Class
    特小屏幕
    <576px
    小屏幕
    ≥576px
    中等屏幕
    ≥768px
    大屏幕
    ≥992px
    特大屏幕
    ≥1200px
    .container-sm 100% 540px 720px 960px 1140px
    .container-md 100% 100% 720px 960px 1140px
    .container-lg 100% 100% 100% 960px 1140px
    .container-xl 100% 100% 100% 100% 1140px
    <div class="container-sm">container-sm</div>
    <div class="container-md">container-md</div>
    <div class="container-lg">container-lg</div>
    <div class="container-xl">container-xl</div>
    
    尝试一下