一种嵌套式栅栏布局的对齐方式

不念不忘少年蓝@ 2022-04-18 00:47 200阅读 0赞

转载自[CSDN][]本文链接地址: [一种嵌套式栅栏布局的对齐方式][Link 1]

在bootstrap的应用中，经常需要对栅格进行嵌套布局，但也因为如此，很容易出现内容无法对齐的现象。

UI给定的要求是两栏表格布局，文字与输入框的占比为1：3，详细布局文件见下图。

![在这里插入图片描述][20181106102051685.png]

几乎不用思考，我们就能很快写出第一行布局，代码如下：

在充分利用bootstrap的样式下，并能适应各类分辨率，如何布好第二行，却是一个难题，因为栅栏布局的嵌套过程中，涉及到布局元素包括padding与width两方面。

思考分析过程如下：

1.  求出label.col-xs-3.control-label元素的宽度；
2.  求出一行减去label.col-xs-3.control-label元素的剩余宽度；
3.  对齐padding；

![在这里插入图片描述][20181106102107631.png]

按照bootstrap的栅格规则槽（gutter）宽30px，我们可以求出label.col-xs-3.control-label元素的宽度，如下：

// 假定每行的宽度为 w
    label的宽度 = (w/2 -30) * 1 / 4 
                = w/8 - 7.5

为了保持padding的一致性，我们决定也嵌套一层布局元素col-xs-12，代码如下：

在上述的布局方式下，textarea对应的labelpadding已对齐，但宽度需要计算，计算方式如下：

// 假定每行的宽度为 w, 占比为r， 补齐的宽度为x
    textarea对应的label宽度 = (w - 30) * r + x
    // 将此宽度与label的宽度对比，很容易求出
    r = 1 / 8 = 0.125
    x = 30/8 - 7.5 = -3.75
    // 求出textarea对应的label样式宽度
    样式宽度 = calc(12.5% - 3.75px)
    textarea的样式宽度 = calc(87.5% + 3.75px)

于是，第二行的布局样式如下：

[CSDN]: https://blog.csdn.net
[Link 1]: https://blog.csdn.net/yiifaa/article/details/56015655
[20181106102051685.png]: /images/20220418/5e812f02f97740c4b4718f02ddbb2ef0.png
[20181106102107631.png]: /images/20220418/87e6fef1b375417688a6390bcfdb794c.png