Question

所以我有一个文本框和按钮设置完全如下：http://www.bootply.com/78014除了我使用@HTML.TextboxFor（）而不是标签。

但我想在文本框中添加一个glyphicon，如下所示：http://plnkr.co/edit/ZrnnkFR3Yv9HGQHrRMiW?p=preview或者：http://jsfiddle.net/LS2Ek/1/

这是我的实际代码：

<div class="input-group col-lg-4 col-md-5 col-sm-7 has-feedback" style="padding-left:15px; padding-right:15px; margin-bottom:15px;">
@Html.TextBoxFor(m => m.Temp, new { @class = "form-control has-feedback", @placeholder = "If Known" })
<i class="form-control-feedback glyphicon glyphicon-ok-circle"></i>
<span class="input-group-btn">
@Ajax.ActionLink("Look Up", "Lookup", "NewUserRequest", null, new { @class = "btn btn-default", id = "lookupGuest" })
</span>
</div>

但是这个glyphicon最终隐藏在按钮下面。

Answer 1

好的，我想我明白你想要的......但是， Bootstrap不允许你这样做。您无法在同一输入上获得反馈gylph和group-btn。（这是关于CSS中的相对定位，我认为你不想开始修补BootStrap CSS ...）

这是你可以做的，或多或少：http://jsfiddle.net/LS2Ek/268/

Answer 2

我能够通过手动设置包装中的glyphicon并手动设置glpyhicon 右的样式来实现此目的。

这是工作：https://jsfiddle.net/kuxxm9fb/

以下是代码本身：

<form class="form-inline" role="form">
</br>
<div class="input-group has-feedback">
<label class="control-label" for="inputSuccess4"></label>
<input type="text" class="form-control" id="inputSuccess4">
    <span class="form-control-feedback glyphicon glyphicon-ok" id="extGuestGlyphiconOK" style="right: 45px"></span>
            <span class="input-group-btn">
         <a class="btn btn-default" id="lookupGuest" href="#">link</a>
    </span>
</div>   
</form>

使用TextBox＆amp;添加Bootstrap Glyphicon到Input-Group;按键

2 个答案: