栅格 Grid

采用了24栅格系统，将区域进行24等分

基础用法

col-12

col-8

col-6

<template>
  <div class="demo-grid">
    <b-row>
      <b-col span="12">col-12</b-col>
      <b-col span="12">col-12</b-col>
    </b-row>
    <br />
    <b-row>
      <b-col span="8">col-8</b-col>
      <b-col span="8">col-8</b-col>
      <b-col span="8">col-8</b-col>
    </b-row>
    <br />
    <b-row>
      <b-col span="6">col-6</b-col>
      <b-col span="6">col-6</b-col>
      <b-col span="6">col-6</b-col>
      <b-col span="6">col-6</b-col>
    </b-row>
  </div>
</template>

<template>
  <div class="demo-grid">
    <b-row>
      <b-col span="12">col-12</b-col>
      <b-col span="12">col-12</b-col>
    </b-row>
    <br />
    <b-row>
      <b-col span="8">col-8</b-col>
      <b-col span="8">col-8</b-col>
      <b-col span="8">col-8</b-col>
    </b-row>
    <br />
    <b-row>
      <b-col span="6">col-6</b-col>
      <b-col span="6">col-6</b-col>
      <b-col span="6">col-6</b-col>
      <b-col span="6">col-6</b-col>
    </b-row>
  </div>
</template>

间隔

栅格间距：

81624

col-6

<template>
  <div class="demo-grid">
    <b-space>
      <span>栅格间距：</span>
      <b-radio-group v-model="gutter" size="small" type="capsule">
        <b-radio :label="8">8</b-radio>
        <b-radio :label="16">16</b-radio>
        <b-radio :label="24">24</b-radio>
      </b-radio-group>
    </b-space>

    <b-row :gutter="gutter" class="gutter">
      <b-col span="6">
        <div>col-6</div>
      </b-col>
      <b-col span="6">
        <div>col-6</div>
      </b-col>
      <b-col span="6">
        <div>col-6</div>
      </b-col>
      <b-col span="6">
        <div>col-6</div>
      </b-col>
    </b-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const gutter = ref(8)
</script>

<template>
  <div class="demo-grid">
    <b-space>
      <span>栅格间距：</span>
      <b-radio-group v-model="gutter" size="small" type="capsule">
        <b-radio :label="8">8</b-radio>
        <b-radio :label="16">16</b-radio>
        <b-radio :label="24">24</b-radio>
      </b-radio-group>
    </b-space>

    <b-row :gutter="gutter" class="gutter">
      <b-col span="6">
        <div>col-6</div>
      </b-col>
      <b-col span="6">
        <div>col-6</div>
      </b-col>
      <b-col span="6">
        <div>col-6</div>
      </b-col>
      <b-col span="6">
        <div>col-6</div>
      </b-col>
    </b-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const gutter = ref(8)
</script>

栅格次序

1 | order-4

2 | order-3

3 | order-2

4 | order-1

<template>
  <div class="demo-grid">
    <b-row type="flex">
      <b-col span="6" order="4">1 | order-4</b-col>
      <b-col span="6" order="3">2 | order-3</b-col>
      <b-col span="6" order="2">3 | order-2</b-col>
      <b-col span="6" order="1">4 | order-1</b-col>
    </b-row>
  </div>
</template>

<template>
  <div class="demo-grid">
    <b-row type="flex">
      <b-col span="6" order="4">1 | order-4</b-col>
      <b-col span="6" order="3">2 | order-3</b-col>
      <b-col span="6" order="2">3 | order-2</b-col>
      <b-col span="6" order="1">4 | order-1</b-col>
    </b-row>
  </div>
</template>

栅格顺序

使用push和pull来改变栅格顺序

col-14 | push="10"

col-10 | pull="14"

<template>
  <div class="demo-grid">
    <b-row>
      <b-col span="14" push="10">col-14 | push="10"</b-col>
      <b-col span="10" pull="14">col-10 | pull="14"</b-col>
    </b-row>
  </div>
</template>

<template>
  <div class="demo-grid">
    <b-row>
      <b-col span="14" push="10">col-14 | push="10"</b-col>
      <b-col span="10" pull="14">col-10 | pull="14"</b-col>
    </b-row>
  </div>
</template>

左右偏移

offset 可以设置偏移量

col-8

col-8 | offset-8

col-6 | offset-8

col-6 | offset-4

col-12 | offset-8

<template>
  <div class="demo-grid">
    <b-row>
      <b-col span="8">col-8</b-col>
      <b-col span="8" offset="8">col-8 | offset-8</b-col>
    </b-row>
    <br />
    <b-row>
      <b-col span="6" offset="8">col-6 | offset-8</b-col>
      <b-col span="6" offset="4">col-6 | offset-4</b-col>
    </b-row>
    <br />
    <b-row>
      <b-col span="12" offset="8">col-12 | offset-8</b-col>
    </b-row>
  </div>
</template>

<template>
  <div class="demo-grid">
    <b-row>
      <b-col span="8">col-8</b-col>
      <b-col span="8" offset="8">col-8 | offset-8</b-col>
    </b-row>
    <br />
    <b-row>
      <b-col span="6" offset="8">col-6 | offset-8</b-col>
      <b-col span="6" offset="4">col-6 | offset-4</b-col>
    </b-row>
    <br />
    <b-row>
      <b-col span="12" offset="8">col-12 | offset-8</b-col>
    </b-row>
  </div>
</template>

flex布局

子元素向左排列

col-4

子元素向右排列

col-4

子元素居中排列

col-4

子元素等宽排列

col-4

子元素分散排列

col-4

顶部对齐

col-4

底部对齐

col-4

居中对齐

col-4

<template>
  <div class="demo-grid">
    <p>子元素向左排列</p>
    <b-row type="flex" justify="start" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>子元素向右排列</p>
    <b-row type="flex" justify="end" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>子元素居中排列</p>
    <b-row type="flex" justify="center" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>子元素等宽排列</p>
    <b-row type="flex" justify="space-between" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>子元素分散排列</p>
    <b-row type="flex" justify="space-around" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>顶部对齐</p>
    <b-row type="flex" justify="center" align="top" class="code-row-bg">
      <b-col span="4"><p style="height: 80px">col-4</p></b-col>
      <b-col span="4"><p style="height: 30px">col-4</p></b-col>
      <b-col span="4"><p style="height: 100px">col-4</p></b-col>
      <b-col span="4"><p style="height: 60px">col-4</p></b-col>
    </b-row>
    <p>底部对齐</p>
    <b-row type="flex" justify="center" align="bottom" class="code-row-bg">
      <b-col span="4"><p style="height: 80px">col-4</p></b-col>
      <b-col span="4"><p style="height: 30px">col-4</p></b-col>
      <b-col span="4"><p style="height: 100px">col-4</p></b-col>
      <b-col span="4"><p style="height: 60px">col-4</p></b-col>
    </b-row>
    <p>居中对齐</p>
    <b-row type="flex" justify="center" align="middle" class="code-row-bg">
      <b-col span="4"><p style="height: 80px">col-4</p></b-col>
      <b-col span="4"><p style="height: 30px">col-4</p></b-col>
      <b-col span="4"><p style="height: 100px">col-4</p></b-col>
      <b-col span="4"><p style="height: 60px">col-4</p></b-col>
    </b-row>
  </div>
</template>

<style scoped>
.code-row-bg {
  background: #eee;
  p {
    color: #fff;
  }
}
</style>

<template>
  <div class="demo-grid">
    <p>子元素向左排列</p>
    <b-row type="flex" justify="start" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>子元素向右排列</p>
    <b-row type="flex" justify="end" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>子元素居中排列</p>
    <b-row type="flex" justify="center" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>子元素等宽排列</p>
    <b-row type="flex" justify="space-between" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>子元素分散排列</p>
    <b-row type="flex" justify="space-around" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>顶部对齐</p>
    <b-row type="flex" justify="center" align="top" class="code-row-bg">
      <b-col span="4"><p style="height: 80px">col-4</p></b-col>
      <b-col span="4"><p style="height: 30px">col-4</p></b-col>
      <b-col span="4"><p style="height: 100px">col-4</p></b-col>
      <b-col span="4"><p style="height: 60px">col-4</p></b-col>
    </b-row>
    <p>底部对齐</p>
    <b-row type="flex" justify="center" align="bottom" class="code-row-bg">
      <b-col span="4"><p style="height: 80px">col-4</p></b-col>
      <b-col span="4"><p style="height: 30px">col-4</p></b-col>
      <b-col span="4"><p style="height: 100px">col-4</p></b-col>
      <b-col span="4"><p style="height: 60px">col-4</p></b-col>
    </b-row>
    <p>居中对齐</p>
    <b-row type="flex" justify="center" align="middle" class="code-row-bg">
      <b-col span="4"><p style="height: 80px">col-4</p></b-col>
      <b-col span="4"><p style="height: 30px">col-4</p></b-col>
      <b-col span="4"><p style="height: 100px">col-4</p></b-col>
      <b-col span="4"><p style="height: 60px">col-4</p></b-col>
    </b-row>
  </div>
</template>

<style scoped>
.code-row-bg {
  background: #eee;
  p {
    color: #fff;
  }
}
</style>

响应式布局

预设六个响应尺寸：xs sm md lg xl xxl，详见 API。

b-col

<template>
  <div class="demo-grid">
    <b-row>
      <b-col :xs="2" :sm="4" :md="6" :lg="8">b-col</b-col>
      <b-col :xs="20" :sm="16" :md="12" :lg="8">b-col</b-col>
      <b-col :xs="2" :sm="4" :md="6" :lg="8">b-col</b-col>
    </b-row>
  </div>
</template>

<template>
  <div class="demo-grid">
    <b-row>
      <b-col :xs="2" :sm="4" :md="6" :lg="8">b-col</b-col>
      <b-col :xs="20" :sm="16" :md="12" :lg="8">b-col</b-col>
      <b-col :xs="2" :sm="4" :md="6" :lg="8">b-col</b-col>
    </b-row>
  </div>
</template>

Row Props

参数	说明	类型	可选值	默认值
gutter	栅格间距，单位 px	Number/String	—	0
type	布局模式，在现代浏览器下有效	String	flex或不选	—
justify	lex 布局下的水平排列方式	String	—	—
align	flex 布局下的垂直对齐方式	String	start、end、center、space-around、space-between	—
class-name	自定义的class名称	String	—	—

Col Props

参数	说明	类型	可选值	默认值
span	栅格的占位格数为0 时，相当于display:none	Number/String	0~24	-
order	栅格的顺序在flex布局模式下有效	Number/String	-	-
offset	栅格左侧偏移	Number/String	-	-
push	栅格向右移动格数	Number/String	-	-
pull	栅格向左移动格数	Number/String	-	-
class-name	自定义的class	String	-	-
xs	<576px 响应式栅格	Number	-	-
sm	(≥576px < 768px)≥576px 响应式栅格	Number	-	-
md	(≥768px < 992px) 响应式栅格	Number	-	-
lg	(≥992px < 1200px) 响应式栅格	Number	-	-
xl	(≥1200px < 1600px) 响应式栅格	Number	-	-
xxl	≥1600px 响应式栅格	Number	-	-

栅格 Grid ​

基础用法 ​

间隔 ​

栅格次序 ​

栅格顺序 ​

左右偏移 ​

flex布局 ​

响应式布局 ​

Row Props ​

Col Props ​

栅格 Grid

基础用法

间隔

栅格次序

栅格顺序

左右偏移

flex布局

响应式布局

Row Props

Col Props