Dreamweaver CC教程:调整列的尺寸和使列发生位移

Dreamweaver CC教程:调整列的尺寸和使列发生位移

Dreamweaver CC教程:调整列的尺寸和使列发生位移

调整列的尺寸和使列发生位移
调整列的尺寸和使列发生位移非常有必要,特别是在您为各个视口创建快速响应的设计时。

调整列的尺寸

单击所需的列,然后拖动右侧的控点来调整尺寸。调整列的尺寸时,将会添加 col-*-n 类,其中 * 表示当前媒体查询(xs、sm、md 或 lg),n 表示它占用的列数。
Dreamweaver 会检测当前屏幕大小,并添加相应的类。若要将列调整为适合特定视口的大小,请使用右下角的选项或浏览条更改视口大小。然后将列调整为适当的大小。

使列发生位移

单击所需的列,然后拖动左侧的控点使列发生位移。位移量将显示为阴影区域。使列发生位移时,将会添加 col-*-offset-n 类,其中 * 表示当前媒体查询(xs、sm、md 或 lg),n 表示它移动的列数。
Dreamweaver 会检测当前屏幕大小,并添加相应的类。若要使列发生位移以适合特定视口的大小,请使用右下角的选项或浏览条更改视口大小。然后使列位移适当的距离。

 

推荐阅读