Bootstarp 4 入门之栅格系统

栅格系统

借助十二列系统,五个默认响应层,Sass 变量和 mixins 以及数十个预定义类,使用我们强大的移动优先 flexbox 栅格来构建各种形状和大小的布局。
分为12列

特小
<576px

≥576px

≥768px

≥992px
特大
≥1200px
最大容器宽度 无(自动) 540像素 720px 960px 1140px
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-
列数 12
宽度 30px ,每列15px
可嵌套
列顺序

自动布局列

用特定于断点的列类来简化列大小,而无需使用类似的显式编号类.col-sm-6。

等宽

描述

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

等宽多行,可通过w-100来断行

描述

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

设置一列宽度 ,其他未设置的自动分配大小

描述

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

可变宽度内容,col-{breakpoint}-auto,其中breakpoint就是代表sm,md,lg,xl

描述

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

最小设备设置

描述

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

按尺寸来设置

描述

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

混合排列

描述

div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

内边距处理

描述
可通过父的减,内的加来实现默认的配置或者其其他边距设置

<div class="container ">
    <h2>默认情况下</h2>
    <div class="row ">
        <div class="col border bg-light">Custom column padding</div>
        <div class="col border bg-light">Custom column padding</div>
    </div>
</div>

<div class="container ">
    <h2>row加了mx-lg-n5</h2>
    <div class="row mx-lg-n5">
        <div class="col  border bg-light">Custom column padding</div>
        <div class="col  border bg-light">Custom column padding</div>
    </div>
</div>

<div class="container px-lg-5">
    <h2>container加了row,px-lg-5, row加了mx-lg-n5</h2>
    <div class="row mx-lg-n5">
        <div class="col border bg-light">Custom column padding</div>
        <div class="col border bg-light">Custom column padding</div>
    </div>
</div>

设置行列

描述

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

对齐方式

元素位于容器的开头对齐 align-items-start

描述

 <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>

垂直对齐 align-items-center

描述

<div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>

元素位于容器的结尾对齐 align-items-end

描述

 <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>

同容器内设置对齐方式

描述

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

设置水平对齐方式

justify-content-start 于容器的开头

描述

 <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>

justify-content-center 水平居中对齐

描述

  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>

justify-content-end 尾部对齐

描述

<div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>

justify-content-around 项目位于各行之前、之间、之后都留有空白的容器内

描述

<div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>

2端对齐
描述

<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>

无间隙

默认情况下col带有左右边距15px
描述

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

重新排列

使用.order-类来控制内容的可视顺序。 这些类是响应式的,因此你可以通过断点设置顺序 (例如 .order-1 .order-md-2)。 包括 1 到 12 都可以在栅格系统中受到支持。
还有响应.order-first.order-last 类,用于更改 order 对元素进行 order: -1 或 order: 13 (order: $columns + 1), 这些类也可以根据需要与编号为 .order-* 的类混合。
描述

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

列偏移设置缝隙间隔

你可以通过两种方式偏移栅格列:响应式 .offset- 栅格类和我们的margin工具。 栅格类的大小可以匹配列,而边距对于偏移宽度可变的快速布局更有用。
使用.offset-md-*类将列向右移动。这些类逐*列增加一列的左边距。例如,.offset-md-4移至.col-md-4四列。
描述

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

自动偏移

你可以使用诸如.mr-auto 之类的margin 工具来强制兄弟列彼此远离。
描述

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

嵌套

描述

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。