栅格 - 光年(Light Year Admin V5)后台管理系统模板

栅格

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

Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它采用 flexbox 制造，响应灵敏。

列

<div class="container">
  <div class="row">
    <div class="col">
      列
    </div>
    <div class="col">
      列
    </div>
    <div class="col">
      列
    </div>
  </div>
</div>

栅格选项

Bootstrap的栅格系统可以适应所有六个默认断点，以及您自定义的任何断点。六个默认栅格层如下所示：

超小型（xs）
小型（sm）
中等（md）
大型（lg）
特大号（xl）
特大号（xxl）

如上所述，每个拐点都有自己的容器、唯一的类前缀和修饰符。以下是栅格在这些拐点之间的变化：

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
容器 `max-width`	无 (auto)	540px	720px	960px	1140px	1320px
类前缀	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
列（column）数	12
列边距宽度	1.5rem (.75rem on left and right)
自定义列边距	Yes
可嵌套	Yes
可排序	Yes

自动布局列

利用特定于拐点的列类来轻松调整列大小，而无需像 .col-sm-6 这样的显式编号类。

等宽

例如，这里有两个网格布局适用于每个设备和视口，从 xs 到 xxl。为您需要的每个拐点添加任意数量的无单位类，并且每列的宽度都相同。

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

<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>

设置一列宽

flexbox 栅格列的自动布局还意味着您可以设置一列的宽度并让同级列自动调整其大小。您可以使用预定义的栅格类（如下所示）、栅格混合或内联宽度。请注意，无论中心列的宽度如何，其他列都会调整大小。

1 of 3

2 of 3 (更宽的)

3 of 3

1 of 3

2 of 3 (更宽的)

3 of 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (更宽的)
    </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 (更宽的)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

可变宽度内容

使用 col-{breakpoint}-auto 类根据其内容的自然宽度调整列的大小。

1 of 3

可变宽度内容

3 of 3

1 of 3

可变宽度内容

3 of 3

<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">
      可变宽度内容
    </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">
      可变宽度内容
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

响应类

Bootstrap 的栅格包括六层预定义类，用于构建复杂的响应式布局。在您认为合适的超小型、小型、中型、大型或超大型设备上自定义列的大小。

所有断点

对于从最小设备到最大设备都相同的栅格，请使用 .col 和 .col-* 类。当你需要一个特别大小的列时，指定一个编号的类；否则，请随意坚持使用 .col。

col

col-8

col-4

<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>

堆叠成水平

使用一组 .col-sm-* 类，您可以创建一个基本的栅格系统，该系统从堆叠开始并在小拐点 ( sm ) 处变为水平。

col-sm-8

col-sm-4

col-sm

<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>

混搭

不希望您的列简单地堆叠在某些栅格层中？根据需要为每一层使用不同类的组合。请参阅下面的示例，以更好地了解它是如何工作的。

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- 通过使一个 full-width 和另一个 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>

  <!-- 列在移动设备上的起始宽度为 50%，在桌面上达到 33.3% -->
  <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>

  <!-- 在移动设备和桌面设备上，列的宽度始终为 50% -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

行列

使用响应式 .row-cols-* 类快速设置最能呈现您的内容和布局的列数。虽然普通的 .col-* 类适用于单个列（例如 .col-md-4），但行列类在父 .row 上设置为快捷方式。使用 .row-cols-auto 您可以为列指定自然宽度。

使用这些行列类快速创建基本的网格布局或控制您的卡片布局。

列

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

列

<div class="container">
  <div class="row row-cols-3">
    <div class="col">列</div>
    <div class="col">列</div>
    <div class="col">列</div>
    <div class="col">列</div>
  </div>
</div>

列

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">列</div>
    <div class="col">列</div>
    <div class="col">列</div>
    <div class="col">列</div>
  </div>
</div>

列

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

列

<div class="container">
  <div class="row row-cols-4">
    <div class="col">列</div>
    <div class="col">列</div>
    <div class="col-6">列</div>
    <div class="col">列</div>
  </div>
</div>

列

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">列</div>
    <div class="col">列</div>
    <div class="col">列</div>
    <div class="col">列</div>
  </div>
</div>

嵌套

要使用默认网格嵌套您的内容，请在现有的 .col-sm-* 列中添加一个新的 .row 和一组 .col-sm-* 列。嵌套行应包括一组不超过 12 列的列（不需要使用所有 12 个可用列）。

层 1: .col-sm-3

层 2: .col-8 .col-sm-6

层 2: .col-4 .col-sm-6

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