在表单组中为引导添加输入字段答案

【问题标题】：Prepend to input field in form-group for bootstrap在表单组中为引导添加输入字段
【发布时间】：2022-08-02 21:02:29
【问题描述】：

我有一个使用以下属性的引导表单：

<div class=\"form-group\">
                            <label for=\"recipient-email\" class=\"col-form-label\">Email</label>
                            <input type=\"email\" name=\"email\" placeholder=\"info@traxr.net\" class=\"form-control\" id=\"email\">
                        </div>

....

我有一个额外的输入字段，我想在其中添加一个 https:// 前缀。

显然，它必须被包裹在一个input-group div 中，这会弄乱输入字段的宽度，并且错误标签现在放在同一行

有没有办法将前缀添加到输入字段，同时仍将所有代码保留在 form-group 容器中？

标签： javascript html css twitter-bootstrap

【解决方案1】：

默认情况下，Bootstrap 为输入组提供相同的组件。在这里你可以找到更多https://getbootstrap.com/docs/4.6/components/input-group/

并回答你的问题。

 <div class="input-group mb-3">
   <div class="input-group-prepend">
     <span class="input-group-text" id="basic- addon3">https://</span>
  </div>
   <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

【讨论】：