表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

<div class="form-group col-lg-12">
    <label class="control-label col-lg-1 text-right"></label>    <label class="control-label col-lg-2  text-right">        <input class="form-control-erbi col-lg-6" type="text" name="oldtitle[]" value="{$vo.title}" />    </label>    <label class="control-label col-lg-2 text-right">        <input class="form-control-erbi col-lg-10" type="text" name="oldsec_title[]" value="{$vo.sec_title}"  />    </label>    <label class="control-label col-lg-5 text-left">        <span class="input-group file-caption-main col-lg-10" style="float: left;">            <div class="form-control file-caption kv-fileinput-caption" style="text-align:left;overflow: hidden;line-height: 23px;">            尺寸必须是<span >600*400</span>,png格式            </div>            <input style="display: none;width:0px;border:1px solid #ff99ff;" class="file-real" name="{$vo.id}oldwork_img" type="file" multiple="" />            <div class="input-group-btn file-btn">                <div class="btn btn-primary btn-file">                    <i class="glyphicon glyphicon-folder-open"></i>                     <span class="hidden-xs">作品图片</span>                </div>            </div>        </span>        <span class="col-lg-2 erbi-form-right">            <a href="http://{$hostname}/{$vo.work_img}">点击查看</a>        </span>    </label><!--这里定义为label，如果点击label，会出发label里面隐藏的input事件，扩大input点击作用区域-->    <label class="control-label col-lg-1">        <button type="button" class="btn btn-xs btn-danger del-img">删除</button>    </label></div>
<!--这里定义为label，如果点击label，会出发label里面隐藏的input事件，扩大input点击作用区域-->
注意：这里的上传文件，样式设置，修复了input type='file'的丑陋页面;
可以说bootstrap的label设定的js特性，也可以说是未设定好的bug；
    $(document).on('change','.file-real',function(){        $(this).prev().html($(this).val());    }).on('click','.file-btn',function(){        $(this).prev().click();    });