将美元前缀添加到引导程序输入框 [英] Adding dollar prefix to bootstrap input box

问题描述

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

目前我正在做这样的事情，但输入框之外的标志.

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

解决方案

Bootstrap 版本 4 和 5

此功能在版本 3 和 4 之间发生了显着变化.类 input-group-addon 已被删除，以支持在 input-group-text 中使用 input-group-textcode>input-group-prepend 或 input-group-append.

添加文本

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/><div class="input-group"><div class="input-group-prepend"><span class="input-group-text">$</span>

<input type="text" class="form-control" placeholder="0.00"/>

附加文本

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/><div class="input-group"><input type="text" class="form-control" placeholder="email"/><div class="input-group-append"><span class="input-group-text">@gmail.com</span>

更改添加文本的背景颜色

.input-group-text{背景色:#FFF；}

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>

解决方案

Bootstrap Versions 4 and 5

This functionality changed significantly between versions 3 and 4. The class input-group-addon has been removed in favor of using input-group-text inside of either input-group-prepend or input-group-append.

To prepend text

<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

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

To append text

<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
    <input type="text" class="form-control" placeholder="email" />
    <div class="input-group-append">
        <span class="input-group-text">@gmail.com</span>
    </div>
</div>

To change the background color of the added text

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

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