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

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

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

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

<form action="" class="form-horizontal">
    <div class="form-group">
        <!-- 先将一行划为两列 -->
        <div class="col-xs-6">
            <!-- 四分之一占比 -->
            <label class="col-xs-3 control-label">
                姓名
            </label>
            <!-- 四分之三占比 -->
            <div class="col-xs-9">
                <input type="text" class="form-control"/>
            </div>
        </div>
        <div class="col-xs-6">
            <label class="col-xs-3 control-label">
                单位
            </label>
            <div class="col-xs-9">
                <input type="text" class="form-control"/>
            </div>
        </div>
    </div>
</form>    

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

思考分析过程如下:
1. 求出label.col-xs-3.control-label元素的宽度;
2. 求出一行减去label.col-xs-3.control-label元素的剩余宽度;
3. 对齐padding;

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

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

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

 <div class="form-group">
    <div class="col-xs-12">
        <!--需要放入的布局内容-->
    </div>
</div>

在上述的布局方式下,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)

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

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

最后,谈谈个人对样式的想法:

样式最难的地方在于统一的编码规范,大部分的样式冲突都集中在错误的命名空间与混乱的优先级别,在样式状态的应用中更是如此,所以尽可能地充分利用大家已达成一致的样式,例如bootstrap,这样既容易更新维护,又容易添加新的主题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

蚁方阵

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值