預先添加到表單組中的輸入字段以進行引導

Question

我有一個使用以下屬性的引導表單：

<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 中，這會弄亂輸入字段的寬度以及錯誤 label 現在放在同一行

有沒有辦法將前綴添加到輸入字段，同時仍將所有代碼保留在form-group容器中？

Answer 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>