Ввод начальной загрузки не выравнивается

Question

Я пытаюсь присоединиться к одному из своих входов, но моя проблема в том, что предпенд не попадает в нужное место

Вот как это выглядит: https://prnt.sc/l7wf9y

Это мой HTML:

<div class="form-group"> <label>Avsändare</label> <input type="text" class="form-control" id="sender_input"> </div>
            <div class="form-group"> <label>Mottagare</label> <div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>

Meddelande:

JSFiddle: https://jsfiddle.net/gcbL1e0a/2/

Answer 1

Краткий ответ: input-group-prepend просто работает внутри input-group.

Измените ваш код следующим образом ( здесь работает скрипка ):

<div class="form-group">
    <label>Mottagare</label>
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
        </div>
        <input type="tel" class="form-control" placeholder="+46000000000" id="recipient_input">
     </div>
</div>

ThisРезультаты: