9. Ant Design PC UI组件 Row行Col列 快速上手教程

教程目标

掌握使用 行，列组件 进行布局 的搭配使用

demo预览地址 https://pre.d8dcloud.com/play/638

组件清单如下图

教程步骤

一行 + 一列 作为页面UI组件容器，效果参考图

 在前台节点下，添加

        行

                列

                        纯文本 

 行 配置，背景色为 黄色

 列 配置，背景色 红色

 此时，可以看到列并没有占满整行，列默认只有子节点元素的宽，要占满整行的话，需要给列宽指定一个 1

注意：ant design的行列是栅格布局，一行为分为24等份，当一行只有一列时，列宽1就代表占满了24等份

一行+2列，水平间隔12，自动换行关，列宽 16+8，效果参考图

 行 配置 

 左列 配置

 右列 配置

一行+4列，水平间隔12，自动换行关，列宽 6+6+6+6，效果参考图

行 配置

 

列1 配置

 列2 配置

 列3 配置

 列4 配置

保存 ，预览   https://pre.d8dcloud.com/play/638

 完成

DEMO模块下载地址 https://www.d8dcloud.com/#/app

多八多在线IDE介绍

多八多在线IDE是一个基于Web自带可视化IDE+编译器的开发平台，它为用户提供了一个可视化UI布局来实现前后业务逻辑的开发。多八多在线IDE使用了Node驱动的编译器和一个强大的组件化系统来支持多层组件嵌套。

UI组件库

多八多在线IDE支持Antd UI组件库和移动端的Nut UI组件库，从而可以满足不同设备和平台的需求。

在线CSS编辑器

多八多在线IDE支持组件CSS的在线编辑，让开发者能更方便快捷地实现样式的修改。

状态管理

全站的store状态管理让各组件之间的数据交互更加方便，从而让开发者能更好地控制应用程序的行为。

主题和多语言配置

多八多在线IDE支持全站主题和多语言配置，从而使得不同用户在使用平台时能更方便地切换应用程序的界面风格和语言。

免费注册

多八多在线IDE提供了免费的注册和开发平台，不限制应用数量和使用人数。此外，平台还提供免费下载前后台基础框架，让开发者可以快速上手开发。

应用导出和私有部署

应用程序的免费导出和私有部署让用户可以更好地对应用程序的使用和安全性进行控制。

微服务容器化部署和内网开发

多八多在线IDE支持微服务容器化部署，并且支持内网开发。这使得开发者能够更好地掌控整个应用程序的部署和安全性。

全场景应用支持

多八多在线IDE支持全场景应用开发，可以开发各种应用程序、小程序、APP等。移动端 H5、原生小程序、APP 可以使用同一套代码开发，从而减少重复的工作量和运营成本。

应用组件市场

多八多在线IDE还提供了应用组件市场，开发者可以在市场中寻找和选用已经实现的应用组件和代码，快速实现应用程序的开发。

多八多IDE注册使用地址 

https://www.d8dcloud.com