将 Bootstrap 3.0 标签直接放置在输入字段的顶部，而无需向下推送内容

Position a Bootstrap 3.0 label directly on top of an input field without pushing content down

本文关键字：顶部 下推 字段 标签 Bootstrap 输入      更新时间：2023-09-26

我有一个引导 3.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">...

Id 喜欢将此标签直接放置在输入字段上，以便错误消息看起来像显示在输入文本字段中。

我可以使用一些 css 来做到这一点，但它会不断将内容推到通常在 html 中显示的跨度的每个字段之间。

我需要能够相对定位并同时浮动。

这能做到吗？

您可以改为附加到input-group DIV。 它有position: relative;，任何绝对定位的东西都会留在里面。

根据需要应用样式。

示例：http://jsfiddle.net/x8Zua/2/

.HTML 

<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;
}
相关文章：