我有一个Bootstrap3.0水平表单。
我使用jquery将引导标签直接附加到表单组div之前。
<form role="form" class="form-horizontal" id="form-newUser">
<div class="form-group">
<label class="control-label col-md-4" for="inputUser">New User</label>
<div class="input-group input-group-sm col-md-6">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" id="inputUser" placeholder="Username" xy="left" rqd="required">
</div>
<span class="label label-warning field-error field-error-horizontal col-md-offset-4"><i class="icon-warning-sign"></i> '+errorMessage+'</span>
</div>
<div class="form-group">...
我想将此标签直接放置在输入字段上,这样错误消息看起来就像是显示在输入文本字段中一样。
我可以使用一些css来实现这一点,但它会不断地在每个字段之间向下推送内容,在html中通常会显示跨度。
我需要能够相对定位,同时浮动。
这能做到吗?
您可以改为附加到输入组
DIV。它有位置:相对;
和任何绝对定位将留在它。
根据需要应用样式。
示例:http://jsfiddle.net/x8Zua/2/
超文本标记语言
<div class="input-group input-group-sm col-md-6">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" id="inputUser" placeholder="Username" xy="left" rqd="required">
<span class="label label-warning field-error field-error-horizontal col-md-offset-4"><i class="icon-warning-sign"></i> '+errorMessage+'</span>
</div>
CSS
.field-error {
position: absolute;
top: 7px;
left: 52px;
}