布局

通过基础的 12 分栏，迅速简便地创建布局。

基础用法

md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-8
md-4
md-4
md-4
md-4
md-6
md-6
<cb-row>
  <cb-col span="1">md-1</cb-col>
  <cb-col span="1">md-1</cb-col>
  <cb-col span="1">md-1</cb-col>
  <cb-col span="1">md-1</cb-col>
  <cb-col span="1">md-1</cb-col>
  <cb-col span="1">md-1</cb-col>
  <cb-col span="1">md-1</cb-col>
  <cb-col span="1">md-1</cb-col>
  <cb-col span="1">md-1</cb-col>
  <cb-col span="1">md-1</cb-col>
  <cb-col span="1">md-1</cb-col>
  <cb-col span="1">md-1</cb-col>
</cb-row>
<cb-row>
  <cb-col span="8">md-8</cb-col>
  <cb-col span="4">md-4</cb-col>
</cb-row>
<cb-row>
  <cb-col span="4">md-4</cb-col>
  <cb-col span="4">md-4</cb-col>
  <cb-col span="4">md-4</cb-col>
</cb-row>
<cb-row>
  <cb-col span="6">md-6</cb-col>
  <cb-col span="6">md-6</cb-col>
</cb-row>

适配移动端和桌面端

xs-12 md-8
xs-6 md-4
xs-6 md-4
xs-6 md-4
xs-6 md-4
xs-6
xs-6
<cb-row>
  <cb-col xs="12" md="8">xs-12 md-8</cb-col>
  <cb-col xs="6" md="4">xs-6 md-4</cb-col>
</cb-row>
<cb-row>
  <cb-col xs="6" md="4">xs-6 md-4</cb-col>
  <cb-col xs="6" md="4">xs-6 md-4</cb-col>
  <cb-col xs="6" md="4">xs-6 md-4</cb-col>
</cb-row>
<cb-row>
  <cb-col xs="6">xs-6</cb-col>
  <cb-col xs="6">xs-6</cb-col>
</cb-row>

cb-col 属性

参数 说明 类型 可选值 默认值
span 栅格占据的列数，等效于 md 属性 number / string — 12
xs <768px 响应式栅格数或者栅格属性对象 number / string — —
sm ≥768px 响应式栅格数或者栅格属性对象 number / string — —
md ≥992px 响应式栅格数或者栅格属性对象 number / string — —
lg ≥1200px 响应式栅格数或者栅格属性对象 number / string — —
更多内容 请参考 Bootstrap 的栅格系统文档 https://getbootstrap.com/docs/3.4/css/#grid — — —