在子页面设计窗口中,只要你添加的面板数量在2个或2个以上,就可以通过点击“扩展设置”按钮来定义当前页面的容器布局方式了。
仍以之前搭建的“测试页面”为例,尽管这个页面里有3个不同的容器,但真正在页面上显示的只有2个。如下图:
由上图可以看出,每个容器在不同设备上的显示宽度默认都是12,也就是自动填满屏幕的宽度。正常情况下,手机都用12是正常的,因为手机屏幕很小,占满宽度可以让内容显示的更有条理;平板以上或者横屏显示宽度达到平板以上的设备就可以动一动它们了。假如,我现在希望,本页面在平板上将“容器名1”和“容器名3”放在同一行上显示,且它们的宽度各占50%,那就可以修改平板列的参数:
这样设置之后,重新生成代码,刷新页面,然后使用iPhone X的横屏显示,两个容器就会并排且各占50%的宽度:
如果不要等宽呢?很简单,调整一下即可。例如,将“容器名1”的平板宽度改为9,“容器名3”的平板宽度改成3,这样就变成了75开:
同样的道理,你还可以设置桌面电脑及大屏设备上的宽度,以便让它们在不同的设备上显示出不同的效果。而且,不论页面上有多少个可见容器,你都可以通过此方式让它们显示在一排或者多排。
但需要注意,定义栅格时一定要考虑到不同容器中的内容多少。内容多时,就宽一点;内容少时,就窄一点,否则就会出现高度严重不协调的情况,尤其是在没有指定容器高度、让内容自动撑开的时候。