antd-栅格

1.栅格

<div nz-row>
      <div nz-col nzSpan="8">col-8</div>
      <div nz-col nzSpan="8">col-8</div>
      <div nz-col nzSpan="8">col-8</div>
</div>

2.区块间隔,nzGutter

<div nz-row nzGutter="16">
      <div nz-col nzSpan="8">col-8</div>
      <div nz-col nzSpan="8">col-8</div>
      <div nz-col nzSpan="8">col-8</div>
</div>

3.左右偏移

<div nz-row>
      <div nz-col nzSpan="8">
        col-8
      </div>
      <div nz-col nzSpan="8" nzOffset="8">
        col-8
      </div>
</div>

4.响应式

<div nz-row>
      <div nz-col nzXs="2"  nzSm="4"  nzMd="6"  nzLg="8" nzXl="10">
        Col
      </div>
      <div nz-col nzXs="20" nzSm="16" nzMd="12" nzLg="8" nzXl="4">
        Col
      </div>
      <div nz-col nzXs="2"  nzSm="4"  nzMd="6"  nzLg="8" nzXl="10">
        Col
      </div>
</div>

猜你喜欢

转载自blog.csdn.net/weixin_42995876/article/details/87716862