Grid

nly-row 和 nly-col 是一个移动端优先的 flex-box 布局，是 adminlte3 的响应式布局

<nly-row>
  <nly-col xs="6" md="6" lg="3" col-class="bg-info">1</nly-col>
  <nly-col xs="6" md="2" lg="3" col-class="col bg-warning">2</nly-col>
  <nly-col xs="6" md="1" lg="3" col-class="col bg-danger">3</nly-col>
  <nly-col xs="6" md="3" lg="3" col-class="col bg-primary">4</nly-col>
</nly-row>

<!-- grid.name -->
<!-- nly-grid.vue -->

栅格布局原理

在栅格布局中，每列最多可设置 1 到 12 个宽度单位，且每行在视觉上，最多只能允许所有列加起来有 12 个单位的宽度，超出的会自动换行排列
栅格布局中共有 5 个断点，分别是 xs, sm, md, lg, xl
断点是基于媒体查询的 min-width 写法，即每个断点是代表当前断点及以上。比如 md 代表最小宽度在 md 以及以上宽度，如果不另外设置，这条规则将在 md, lg, xl 都会生效
nly-col 在理论上必须嵌套在 nly-row 中，且 nly-row 不能直接嵌套在 nly-row 中，但 nly-row 可以嵌套在 nly-col 中
每个 nly-col 都有一个水平的 padding 属性，用来控制列的距离，防止内容超出列范围，且可以在视觉上使得每列都是对齐的
在没有设置宽度的情况下，每列会以等宽布局，即每列的宽度都是相等的。由于水平的 padding 属性，会导致每列之间会有间隔，可以使用 nly-row 的 prop no-gutters 来消除列之间的间隔
可以通过设置 <nly-col xs="auto"> 来设置每列为最小宽度，即自适应内容宽度。此列代表在 xs 及以上断点，此列都是最小宽度
nly-row 的 cols-xs, cols-sm, cols-md, cols-lg, cols-xl prop 可让其在不同断点上具有不同的宽度，通常可选 1, 2, 3, 4, 5, 6
nly-col 的 xs, sm, md, lg, xl prop 代表在不同断点上的宽度，最小 1 个单位的宽度，最多 12 个单位的宽度。当一个 nly-col 的宽度为 12 时，在视觉上宽度会填充满整个 nly-row
nly-col 是用百分比来设置的宽度，所以能够适用父元素的宽度

请注意 flexbox 的局限性和有些 html 元素是无法使用 flexbox的

总览

NlyAdminlteVue 的 Grid 栅格布局跟 bootstrap 的栅格布局所支持的断点都是一样的。

行 `<nly-row>`

nly-row 是栅格布局的行，是 nly-col 的容器。 nly-col 在理论上必须嵌套在 nly-row 中，且 nly-row 不能直接嵌套在 nly-row 中，但 nly-row 可以嵌套在 nly-col 中。由于水平的 padding 属性，会导致每列之间会有间隔，可以使用 nly-row 的 prop no-gutters 来消除列之间的间隔

列 `nly-col`

nly-col 是栅格布局的列，理论上 nly-col 必须嵌套在 nly-row 中

断点

NlyAdminlteVue 中的断点是是基于媒体查询的 min-width 写法，即每个断点是代表当前断点及以上。比如 md 代表最小宽度在 md 以及以上宽度，如果不另外设置，这条规则将在 md, lg, xl 都会生效。共有 5 个断点，分别是 xs, sm, md, lg, xl

	Extra small (xs) `<576px`	Small (sm) `≥576px`	Medium (md) `≥768px`	Large (lg) `≥992px`	Extra large (xl) `≥1200px`
Max container width	None (auto)	540px	720px	960px	1140px
Prop	`xs="*"`	`sm="*"`	`md="*"`	`lg="*"`	`xl="*"`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offset	`offset="*"`	`offset-sm="*"`	`offset-md="*"`	`offset-lg="*"`	`offset-xl="*"`
Order	`order="*"`	`order-sm="*"`	`order-md="*"`	`order-lg="*"`	`order-xl="*"`

`<nly-col>` 自动布局

可以利用媒体查询的断点来自动设置列的宽度，不需要使用 nly-col 的其他任何 prop

等宽布局

可以给 nly-col 设置 prop col=true 来使得每列宽度都一样

<nly-container class="nly-example-row">
    <nly-row>
        <nly-col col col-class="bg-info">1 of 2</nly-col>
        <nly-col col-class="bg-warning">2 of 2</nly-col>
    </nly-row>

    <nly-row>
        <nly-col col-class="bg-primary">1 of 3</nly-col>
        <nly-col col-class="bg-dark">2 of 3</nly-col>
        <nly-col col-class="bg-danger">3 of 3</nly-col>
    </nly-row>
</nly-container>

<!-- 等宽.name -->
<!-- nly-grid.vue -->

多行等宽

可以通过插入一个 class="w-100 的元素来使得列换行

<nly-container class="nly-example-row">
  <nly-row>
    <nly-col col-class="bg-primary">Column</nly-col>
    <nly-col col-class="bg-info">Column</nly-col>
    <div class="w-100"></div>
    <nly-col col-class="bg-danger">Column</nly-col>
    <nly-col col-class="bg-warning">Column</nly-col>
  </nly-row>
</nly-container>

<!-- 多行等宽.name -->
<!-- nly-grid-equal-width-multiple-lines.vue -->

单列宽度

Grid 是自动布局，您可以在设置其中一列的宽度，其他列会自动调整其宽度，以达到所有列填满 12 个宽度单位。

<nly-container class="nly-example-row">
  <nly-row class="text-center">
    <nly-col col-class="bg-info">1 of 3</nly-col>
    <nly-col xs="8" col-class="bg-warning">2 of 3 (wider)</nly-col>
    <nly-col col-class="bg-primary">3 of 3</nly-col>
  </nly-row>

  <nly-row class="text-center">
    <nly-col col-class="bg-info">1 of 3</nly-col>
    <nly-col xs="5" col-class="bg-warning">2 of 3 (wider)</nly-col>
    <nly-col col-class="bg-primary">3 of 3</nly-col>
  </nly-row>
</nly-container>

<!-- 单列宽度.name -->
<!-- nly-one-columns.vue -->

内容宽度

在栅格布局中，可以设置 xs, sm, md, lg, xl 为 auto 来使宽度跟随每列的内容，从而达到适应内容的宽度。

<nly-container class="nly-example-row">
  <nly-row row-class="justify-content-md-center">
    <nly-col col lg="2" col-class="bg-info">1 of 3</nly-col>
    <nly-col xs="12" md="auto" col-class="bg-danger">内容宽度</nly-col>
    <nly-col col lg="2" col-class="bg-primary">3 of 3</nly-col>
  </nly-row>

  <nly-row>
    <nly-col col-class="bg-info">1 of 3</nly-col>
    <nly-col xs="12" md="auto" col-class="bg-danger">内容宽度</nly-col>
    <nly-col col lg="2" col-class="bg-primary">3 of 3</nly-col>
  </nly-row>
</nly-container>

<!-- 内容宽度.name -->
<!-- nly-grid-variable-width.vue -->

响应式

NlyAdminlteVue 响应式布局分为 5 个类别，分别是 xs, sm, md, lg, xl 。可以通过相互搭配来调整在小屏，中屏，大屏，超大屏的显示，达到适应屏幕的效果

在所有断点下宽度不变

如果需要不同大小的设备，宽度都不变（这里指百分比），可以设置 col 或者 xs=* 。 col 在不同断点下，所有列宽度百分比都是一样的，即等宽。还可以用 xs=* 来指定一列宽度。

<nly-container class="nly-example-row">
  <nly-row>
    <nly-col col-class="bg-info">col</nly-col>
    <nly-col col-class="bg-warning">col</nly-col>
    <nly-col col-class="bg-danger">col</nly-col>
    <nly-col col-class="bg-dark">col</nly-col>
  </nly-row>

  <nly-row>
    <nly-col xs="8" col-class="bg-info">col-8</nly-col>
    <nly-col xs="4" col-class="bg-warning">col-4</nly-col>
  </nly-row>
</nly-container>

<!-- 所有断点宽度不变.name -->
<!-- nly-grid-all-breakpoint.vue -->

堆叠水平排列

使用 sm="*" or sm (此时每列都是等宽的) 可以创建一个在 sm 断点即以上屏幕的栅格布局，当屏幕在 sm 断点以下，所有列都会堆叠到水平排列，即视觉上，每一行只有一列。

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

  <nly-row>
    <nly-col sm>col-sm</nly-col>
    <nly-col sm>col-sm</nly-col>
    <nly-col sm>col-sm</nly-col>
  </nly-row>
</nly-container>

<!-- nly-grid-horizontal-stacked.vue -->

混合使用

不同的断点可以混合使用，不同的断点在对应的屏幕大小范围会生效。但是需要注意大屏覆盖小屏的地方。

<nly-container class="nly-example-row">
  <nly-row>
    <nly-col xs="12" md="8" col-class="bg-info">xs="12" md="8"</nly-col>
    <nly-col xs="6" md="4" col-class="bg-warning">xs="6" md="4"</nly-col>
  </nly-row>

  <nly-row>
    <nly-col xs="6" md="4" col-class="bg-info">xs="6" md="4"</nly-col>
    <nly-col xs="6" md="4" col-class="bg-warning">xs="6" md="4"</nly-col>
    <nly-col xs="6" md="4" col-class="bg-primary">xs="6" md="4"</nly-col>
  </nly-row>

  <nly-row>
    <nly-col xs="6" col-class="bg-info">xs="6"</nly-col>
    <nly-col xs="6" col-class="bg-danger">xs="6"</nly-col>
  </nly-row>
</nly-container>

<!-- 混合使用.name -->
<!-- nly-grid-mix-and-match.vue -->

对齐方式

使用 flex-box 的对齐 class 可以使得 nly-row 和 nly-col 实现盒子布局

整行行垂直对齐

可以设置 nly-row 的 prop align-v 来使得整行调整垂直对齐方式，可选 start , baseline , end , stretch , center

<nly-container class="nly-example-row nly-example-row-flex-cols">
  <nly-row align-v="start">
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
  </nly-row>
  <nly-row align-v="center">
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
  </nly-row>

  <nly-row align-v="end">
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
  </nly-row>

  <nly-row align-v="baseline">
    <nly-col style="font-size: 0.75rem;">One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
    <nly-col style="font-size: 1.25rem;">One of three columns</nly-col>
  </nly-row>

  <nly-row align-v="stretch">
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
    <nly-col>One of three columns</nly-col>
  </nly-row>
</nly-container>

<!-- 行垂直对齐.name -->
<!-- nly-grid-align-v.vue -->

可以设置 nly-col 的 prop align-self 来设置每列在 nly-row 组件中的垂直位置。可选 start , center , end , baseline , stretch

<nly-container class="nly-example-row nly-example-row-flex-cols">
  <nly-row>
    <nly-col align-self="start">One of three columns</nly-col>
    <nly-col align-self="center">One of three columns</nly-col>
    <nly-col align-self="end">One of three columns</nly-col>
  </nly-row>
  <nly-row>
    <nly-col align-self="baseline">One of two columns</nly-col>
    <nly-col align-self="stretch">One of two columns</nly-col>
  </nly-row>
</nly-container>

<!-- 行垂直对齐.name -->
<!-- nly-grid-align-self.vue -->

整行水平对齐

可以设置 nly-row 的 prop align-h 来设置正好水平对齐，可选 start , center , end , around , between

<nly-container class="nly-example-row">
  <nly-row align-h="start">
    <nly-col xs="4">One of two columns</nly-col>
    <nly-col xs="4">One of two columns</nly-col>
  </nly-row>

  <nly-row align-h="center">
    <nly-col xs="4">One of two columns</nly-col>
    <nly-col xs="4">One of two columns</nly-col>
  </nly-row>

  <nly-row align-h="end">
    <nly-col xs="4">One of two columns</nly-col>
    <nly-col xs="4">One of two columns</nly-col>
  </nly-row>

  <nly-row align-h="around">
    <nly-col xs="4">One of two columns</nly-col>
    <nly-col xs="4">One of two columns</nly-col>
  </nly-row>

  <nly-row align-h="between">
    <nly-col cols="4">One of two columns</nly-col>
    <nly-col cols="4">One of two columns</nly-col>
  </nly-row>
</nly-container>

<!-- 整行水平对齐.name -->
<!-- nly-grid-align-h.vue -->

排序

重新排序

nly-col 可以设置 prop order-* 来重新排序。 order-xs , order-sm , order-md , order-lg , order-xl 分别代表 5 个断点下的排列循序。

<nly-row style="padding-bottom:10px">
  <nly-col order-xs="1" order-sm="2" order-md="3" order-lg="4" style="background-color: #28a745;"> order-xs="1" order-sm="2" order-md="3" order-lg="4"</nly-col>

  <nly-col order-xs="2" order-sm="3" order-md="4" order-lg="1" style="background-color: #17a2b8;"> order-xs="2" order-sm="3" order-md="4" order-lg="1"</nly-col>

  <nly-col order-xs="3" order-sm="4" order-md="1" order-lg="2" style="background-color: #ffc107;"> order-xs="3" order-sm="4" order-md="1" order-lg="2"</nly-col>

  <nly-col order-xs="4" order-sm="1" order-md="2" order-lg="3" style="background-color: #dc3545;"> order-xs="4" order-sm="1" order-md="2" order-lg="3"</nly-col>
</nly-row>

<!-- 排序.name -->
<!-- nly-grid-order.vue -->

位置偏移

nly-col 可以设置 prop offset-* 来设置偏移量。 offset-xs , offset-sm , offset-md , offset-lg , offset-xl 分别代表 5 个断点下的偏移量。

<nly-container fluid class="nly-example-row">
  <nly-row>
    <nly-col md="4">md="4"</nly-col>
    <nly-col md="4" offset-md="4">md="4" offset-md="4"</nly-col>
  </nly-row>

  <nly-row>
    <nly-col md="3" offset-md="3">md="3" offset-md="3"</nly-col>
    <nly-col md="3" offset-md="3">md="3" offset-md="3"</nly-col>
  </nly-row>

  <nly-row>
    <nly-col md="6" offset-md="3">md="6" offset-md="3"</nly-col>
  </nly-row>
</nly-container>

<!-- 偏移量.name -->
<!-- nly-grid-offset.vue -->

如果您需要重置偏移量，您可以设置 offset-* = 0

<nly-container fluid class="nly-example-row">
  <nly-row>
    <nly-col sm="5" md="6">sm="5" md="6"</nly-col>
    <nly-col sm="5" offset-sm="2" md="6" offset-md="0">sm="5" offset-sm="2" md="6" offset-md="0"</nly-col>
  </nly-row>

  <nly-row>
    <nly-col sm="6" md="5" lg="6">sm="6" md="5" lg="6"</nly-col>
    <nly-col sm="6" md="5" offset-md="2" lg="6" offset-lg="0">sm="6" md="5" offset-md="2" col-lg="6" offset-lg="0"</nly-col>
  </nly-row>
</nly-container>

<!-- 偏移量.name -->
<!-- nly-grid-offset.vue -->

组件参数

查看源码

`<nly-row>`

函数式组件（Functional component）

<nly-row> props 参数

props 参数

props (Click to sort Ascending)	类型	默认值	描述
`tag`	`String`	`'div'`	标签
`no-gutters`	`Boolean`	`false`	去除栅格间距
`align-h`	`String`	`null`	设置整行水平对齐方式，可选 start, center, end, around, between
`align-v`	`String`	`null`	设置整行垂直对齐方式，可选 start, baseline, end, stretch,center
`cols-xs`	`String` or `Number`		宽度xs及以上断点一行列数，可选1，2，3，4，5，6
`cols-sm`	`String` or `Number`		宽度sm及以上断点一行列数，可选1，2，3，4，5，6
`cols-md`	`String` or `Number`		宽度md及以上断点一行列数，可选1，2，3，4，5，6
`cols-lg`	`String` or `Number`		宽度lg及以上断点一行列数，可选1，2，3，4，5，6
`cols-xl`	`String` or `Number`		宽度xl及以上断点一行列数，可选1，2，3，4，5，6
`row-class`	`String`		自定义css式样，可自定义实现需要，也可以使用align-items-start所有行顶部对齐，row align-items-center所有行锤子居中对齐，align-items-end所有行底部对齐，justify-content-start所有行水平左对齐，justify-content-center所有行水平居中对齐，justify-content-end所有行右对齐，justify-content-around所有行非起始中间对齐，justify-content-between所有行左右对齐

查看源码

`<nly-col>`

函数式组件（Functional component）

<nly-col> props 参数

props 参数

props (Click to sort Ascending)	类型	默认值	描述
`tag`	`String`	`'div'`	标签
`col`	`Boolean`	`false`	在没有其他props的情况下，所有列等宽
`xs`	`String` or `Number`		宽度在xs及以上断点列宽,可选1，2，3，4，5，6，7，8，9，10，11，12，auto，auto为根据断点自动宽度
`sm`	`String` or `Boolean` or `Number`	`false`	宽度在sm及以上断点列宽,可选1，2，3，4，5，6，7，8，9，10，11，12，auto，auto为根据断点自动宽度
`md`	`String` or `Boolean` or `Number`	`false`	宽度在md及以上断点列宽,可选1，2，3，4，5，6，7，8，9，10，11，12，auto，auto为根据断点自动宽度
`lg`	`String` or `Boolean` or `Number`	`false`	宽度在lg及以上断点列宽,可选1，2，3，4，5，6，7，8，9，10，11，12，auto，auto为根据断点自动宽度
`xl`	`String` or `Boolean` or `Number`	`false`	宽度在xl及以上断点列宽,可选1，2，3，4，5，6，7，8，9，10，11，12，auto，auto为根据断点自动宽度
`align-self`	`String`	`null`	水平對齊方式, 可选 start, center, end, baseline , stretch
`offset-xs`	`String` or `Number`		宽度在xs及以上断点右移列数,可选0，2，3，4，5，6，7，8，9，10，11
`offset-sm`	`String` or `Number`		宽度在sm及以上断点右移列数,可选0，2，3，4，5，6，7，8，9，10，11
`offset-md`	`String` or `Number`		宽度在md及以上断点右移列数,可选0，2，3，4，5，6，7，8，9，10，11
`offset-lg`	`String` or `Number`		宽度在Lg及以上断点右移列数,可选0，2，3，4，5，6，7，8，9，10，11
`offset-xl`	`String` or `Number`		宽度在xl及以上断点右移列数,可选0，2，3，4，5，6，7，8，9，10，11
`order-xs`	`String` or `Number`		宽度在xs及以上断点排列顺序,可选0，1，2，3，4，5，6，7，8，9，10，11，12
`order-sm`	`String` or `Number`		宽度在sm及以上断点排列顺序,可选0，1，2，3，4，5，6，7，8，9，10，11，12
`order-md`	`String` or `Number`		宽度在md及以上断点排列顺序,可选0，1，2，3，4，5，6，7，8，9，10，11，12
`order-lg`	`String` or `Number`		宽度在lg及以上断点排列顺序,可选0，1，2，3，4，5，6，7，8，9，10，11，12
`order-xl`	`String` or `Number`		宽度在xl及以上断点排列顺序,可选0，1，2，3，4，5，6，7，8，9，10，11，12
`col-class`	`String`		自定义css式样,可以用自定义css式样或者adminlte自定义式样让col实现对齐等其他功能align-self-start顶部对齐，align-self-center中间对齐，align-self-end底部对齐

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件	导出名称	导出路径
`<nly-row>`	`NlyRow`	`nly-adminlte-vue`
`<nly-col>`	`NlyCol`	`nly-adminlte-vue`

例子

import { NlyRow } from 'nly-adminlte-vue'
Vue.component('nly-row', NlyRow)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称	导出路径
`GridPlugin`	`nly-adminlte-vue`

例子

import { GridPlugin } from 'nly-adminlte-vue'
Vue.use(GridPlugin)

总览

行 <nly-row>

列 nly-col

断点

<nly-col> 自动布局

等宽布局

多行等宽

单列宽度

内容宽度

响应式

在所有断点下宽度不变

堆叠水平排列

混合使用

对齐方式

整行行垂直对齐

整行水平对齐

排序

重新排序

位置偏移

组件参数

<nly-row>

props 参数

<nly-col>

props 参数

单个组件导入

导出作为插件

行 `<nly-row>`

列 `nly-col`

`<nly-col>` 自动布局

`<nly-row>`

`<nly-col>`