列可以从左侧“设置面板”中操作和设置样式,也可以右键单击列从弹出的上下文菜单中设置。

新建列

如果您想添加一个新的列,选择一个区域内现有的任意一列,并点击操作菜单,选择添加列。

提示:列的内部包含内容区域,您可以在内容区域拖动/添加设计器中的其他控件。在PC视图中,列水平排列在区域内,可以通过设置列宽让列在平板电脑或其他移动设备上垂直显示。

布局设置

默认情况下,每列的宽度相等,即 1 列为 100%,2 列各为 50%,依此类推。但是,您可以通过设置不同的百分比来更改每列的宽度。例如,一个区域中有 3 列,可以将列 1 和列 3 的宽度设置为 20%,并将列 2 的宽度设置为 60%。

您可以在 PC、平板电脑和移动设备上设置不同的百分比。 对于平板电脑和移动设备尺寸,您可以通过更改列宽的百分比来使列显示为多行。

  • 布局的详细设置
  1. 列宽 (%):设置列宽
  2. 垂直对齐:设置列内容的垂直对齐。这样,您就可以将某个区域的所有列的内容粘、到底部,顶部、中部,或者“拉伸填充”以对齐高度不相等的列。可供选择的值有:顶部,中部,底部,之间留空,周围留空,均匀留空
  3. 水平对齐:水平对齐方式扩展了内联定位的功能,它允许用户水平对齐放置在同一行中的内联元素/控件。 可供选择的值有:顶部,中部,底部,之间留空,周围留空,均匀留空
  4. 控件间距(px):设置某一列中的控件的间距
  • 留空的含义
  1. 之间留空:控件位于区域的起始位置和结束位置,剩余空间用空白填充
  2. 周围留空:控件之间的间距相等,控件与区域的起始位置/结束位置的间距是控件与控件间距的一半
  3. 均匀留空:控件以外的剩余空间均匀分配

列的样式设置

  • 背景(常规/悬停)

背景设置有经典、渐变、视频背景、图像背景等多种选择。

可以选择经典(设置一个背景颜色或图像)、渐变(设置一个颜色渐变的背景)、视频背景或图像背景。

  • 边框(常规/悬停)
    1. 边框类型:设置边框的类型,值有:无/实线/双实线/点线/虚线/凹槽
    2. 边框半径:设置边框的圆角
    3. 阴影:设置边框的阴影
  • 排版

为列设置文字颜色、文字对齐

高级设置

  • 高级

设置外边距和内边距,以在内容外部和内部留出空间。 一个区域的内边距也会影响它的高度。 最佳做法是设置控件的顶部和底部内边距,然后添加内容使其相应地调整。

  1. 外边距: 设置列的外边距
  2. 内边距:设置列的外边距
  3. CSS ID:为列设置CSS ID
  4. CSS 类: 为列设置CSS 类
  5. 响应式::在台式机、平板电脑或移动设备上显示或隐藏列
  • 响应式

在台式机、平板电脑或移动设备上显示或隐藏列

  1. 反转列:滑动以反转列的顺序(适合移动设备)
  2. 可见性:在台式机、平板电脑或移动设备上显示/隐藏列
  3. 自定义CSS

添加自己的CSS代码

Updated on 2022年7月1日

Was this article helpful?

Related Articles