向引导程序输入框添加美元前缀

Question

是否有引导方式/样式将不可编辑的前缀添加到输入框中？如美元符号。前缀必须包含在输入框中。

目前我正在做这样的事情，但是这个标志已经没有了输入框。

<div class="input-group input-medium "> 
    <input type="text" class="form-control input-lg" readonly=""> 
    <span class="input-group-btn"> 
     $ 
    </span> 
</div> 

Answer 1

对于此功能，Twitter引导程序有一个名为input-group-addon的类。

你可能想这

<div class="input-group"> 
    <span class="input-group-addon">$</span> 
    <input type="text" class="form-control" placeholder="price"> 
</div> 

Js Fiddle Demo - Basic

更新：要从$背景点登录，您只需要覆盖input-group-addon类

.input-group-addon 
{ 
    background-color:#FFF; 
} 

Js Fiddle Demo - Without Background

如果你想删除$标志的右侧边框，您可以将这个CSS以及

.input-group .input-group-addon + .form-control 
{ 
    border-left:none; 
} 

Js Fiddle Demo - Without Border

Answer 2

您可以通过设置input-group一个position:relative和absolute positioning的input和添加到该span具有更高的（比输入的z-索引）z-index跨度的数字。

还需要添加到input一个padding-left值等于span的宽度

Answer 3

HTML：

<div class="col-xs-6" > 
    <div class="left-inner-addon"> 
     <span>$</span> 
     <input type="text" class="form-control" placeholder="Amount" /> 
    </div> 
</div> 
<div class="col-xs-6" > 
    <div class="right-inner-addon"> 
     <span>$</span> 
     <input type="search" class="form-control" placeholder="Amount" /> 
    </div> 
</div> 

CSS：

.left-inner-addon { 
    position: relative; 
} 
.left-inner-addon input { 
    padding-left: 22px;  
} 
.left-inner-addon span { 
    position: absolute; 
    padding: 7px 12px; 
    pointer-events: none; 
} 

.right-inner-addon { 
    position: relative; 
} 
.right-inner-addon input { 
    padding-right: 30px;  
} 
.right-inner-addon span { 
    position: absolute; 
    right: 0px; 
    padding: 7px 12px; 
    pointer-events: none; 
} 

jsFiddle

Answer 4

这里有一个简单的插件为此 https://github.com/stuartchaney/bootstrap3-money-field