1

私はブートストラップ 3.0 水平フォームを持っています。

jquery を使用して、フォーム グループ div の直前に Bootstrap ラベルを追加しています。

<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 に表示される各フィールド間でコンテンツを押し下げ続けます。

相対的にポジショニングすると同時に浮くことができる必要があります。

これはできますか？

4

1 に答える 1

1

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;
}
于 2013-09-14T17:56:06.313 に答える