在引导输入框中添加美元前缀 [英] Adding dollar prefix to bootstrap input box

问题描述

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

目前我正在做类似这样的事情，但该符号不在输入框中。

 < div class =input-group input-medium> 
< input type =textclass =form-control input-lgreadonly => 
< span class =input-group-btn> 
 $ 
< / span> 
< / div> 
  

解决方案

Twitter bootstrap有一个名为 input-group-addon 。

您可能想要这个

 < div class =input-group> 
< span class =input-group-addon> $< / span> 
< input type =textclass =form-controlplaceholder =price> 
< / div> 
  

Js Fiddle Demo - Basic

更新：从 $ sign - 您只需要覆盖 input-group-addon class

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

如果您想从<$ c $的右侧删除边框c> $ sign，你可以添加这个css以及

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

Js小提琴演示 - 无边框

Is there anyway bootstrap way/style to add non-editable prefix into the inputbox? such as the dollar sign. the prefix has to be included inside the input box.

currently I'm doing something like this, but the sign is out of the inputbox.

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

解决方案

Twitter bootstrap has a class named input-group-addon for this feature.

You probably want this

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

Js Fiddle Demo - Basic

Update: To remove the background from the $ sign- You just need to overwrite the input-group-addon class

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

Js Fiddle Demo - Without Background

If you want to remove the border from right side of $ sign, You can add this css as well

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

Js Fiddle Demo - Without Border

这篇关于在引导输入框中添加美元前缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！