html - 在 Bootstrap 中的分段按钮上方显示文本

Question

我试图在 Bootstrap 中的分段按钮顶部显示文本，但是它不起作用。分段按钮和链接的文本框使用表单组进行包装。

fiddler :

https://jsfiddle.net/99x50s2s/55/

<div class="col-md-3">                           
    <div class="form-group">
        <label class="control-label normal-text">Code<i class='asterisk'>*</i></label>
    <label class="control-label normal-text">Legacy</label>
    <label class="control-label normal-text">Actual</label>
        <div class="input-group">
            <input type="text" class="form-control" id="CodeFilterTxtBox"/>
                <div class="input-group-btn">
                    <label class="btn btn-default">
                        <input type="radio" name="revcode" id="LegacyCodeChkBox"/>17893
                    </label>
                    <label class="btn btn-default">
                        <input type="radio" name="revcode" id="ActualCodeChkBox"/>34778
                    </label>
                </div>
            </div>
    </div>
</div>

期望:

感谢任何帮助。

Answer 1

给标签绝对定位:

.form-group label.control-label:nth-child(2),
.form-group label.control-label:nth-child(3) {
  position: absolute;
}

然后添加以下代码:

$('.form-group label.control-label:nth-child(2)')
  .css('left', $('#LegacyCodeChkBox').offset().left);

$('.form-group label.control-label:nth-child(3)')
  .css('left', $('#ActualCodeChkBox').offset().left);

Fiddle