Question

我正在尝试在引导程序中的分段按钮顶部显示文本但是，它无法正常工作。分段按钮和链接文本框使用表单组进行包装。

的Fiddler：

<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>

期望：

enter image description here

感谢任何帮助。

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

Answer 2

我开始向输入添加一个属性，并将其放在带有:: before伪元素选择器的按钮顶部。

input[type="radio"]::before{
content:attr(text);
position:absolute;
top: -50%;}

注意输入元素本身的新“文本”属性。

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

Answer 3

我认为您可以使用col inside来控制大小，即使是输入控件和单选按钮，JSfiddle

div class="col-md-3">
    <div class="row">
        <div class="col-md-4">
            <label class="control-label normal-text">Code<i class='asterisk'>*</i>
            </label>
        </div>
        <div class="col-md-4">
            <label class="control-label normal-text">Legacy</label>
        </div>
        <div class="col-md-4">
            <label class="control-label normal-text">Actual</label>
        </div>
    </div>
    <div class="form-group">
        <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 4

您可以在里面添加两个<span>文本，并将它们显示在单选按钮上方。

http://jsfiddle.net/jL6x0apu/

.label-legacy,
.label-actual {
    position: absolute;
    top: -25px;
}

或者使用伪content作为文本。

http://jsfiddle.net/tjrwf7zo/

.label-legacy:before,
.label-actual:before {
    position: absolute;
    top: -25px;
}
.label-legacy:before {
    content: "Legacy";
}
.label-actual:before {
    content: "Actual";
}

查看演示并查看旁边的评论。

在引导程序中显示分段按钮上方的文本

4 个答案: