html - 将美元前缀添加到 Bootstrap 输入框

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 Bootstrap 版本 3 有一个名为 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