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

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

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

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

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

在这里插入图片描述

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

  1. <form action="" class="form-horizontal">
  2. <div class="form-group">
  3. <!-- 先将一行划为两列 -->
  4. <div class="col-xs-6">
  5. <!-- 四分之一占比 -->
  6. <label class="col-xs-3 control-label">
  7. 姓名
  8. </label>
  9. <!-- 四分之三占比 -->
  10. <div class="col-xs-9">
  11. <input type="text" class="form-control"/>
  12. </div>
  13. </div>
  14. <div class="col-xs-6">
  15. <label class="col-xs-3 control-label">
  16. 单位
  17. </label>
  18. <div class="col-xs-9">
  19. <input type="text" class="form-control"/>
  20. </div>
  21. </div>
  22. </div>
  23. </form>

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

思考分析过程如下:

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

在这里插入图片描述

按照bootstrap的栅格规则槽(gutter)宽30px,我们可以求出label.col-xs-3.control-label元素的宽度,如下:

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

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

  1. <div class="form-group">
  2. <div class="col-xs-12">
  3. <!--需要放入的布局内容-->
  4. </div>
  5. </div>

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

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

于是,第二行的布局样式如下:

  1. <div class="form-group">
  2. <div class="col-xs-12">
  3. <!-- 添加col-xs-1样式是为了充分利用栅格的默认特性,如浮动与padding -->
  4. <label class="control-label col-xs-1" style="width:calc(12.5% - 3.75px);">
  5. 备注信息
  6. </label>
  7. <div class="col-xs-1" style="width:calc(87.5% + 3.75px);" >
  8. <textarea type="text" class="form-control" rows="5">
  9. </textarea>
  10. </div>
  11. </div>
  12. </div>

发表评论

表情:
评论列表 (有 0 条评论,198人围观)

还没有评论,来说两句吧...

相关阅读