BootStrap выбрать неправильную ширину при добавлении prepend

Question

Я делаю страницу входа и хотел поставить иконку перед выбором с помощью prepend, чтобы это указывало на то, что вы можете изменить язык здесь, когда я добавил его, ширина выбора стала неправильной, она слишком велика с правой стороны (как наскриншот ниже)

<div class="input-group">

                <div class="input-group-prepend offset-2 offset-md-3">
                    <div class="input-group-text">
                        <i class="fas fa-globe-europe"></i>
                    </div>
                </div>

                <select class="form-control col-8 col-md-6" name="lang" onchange="this.form.submit();">

                        <optgroup label="Official Languages">
                            <option value="en" selected="">English (United States)</option>
                            <option value="pl">Polski (Polska)</option>
                        </optgroup>
                        <optgroup label="Community Translations (not checked by us)">
                            <option value="es">Español (España)</option>
                        </optgroup>

                        </select>                           

                    <div class="container">
                        <div class="row">
                            <div class="col-12 text-center">
                                <span onclick="window.open(dir+'popup/unofficial-translations','popupUNOFFTRANSL','height=500,width=1000,left=100,top=100,resizable=no,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no, status=no');" style="font-size: 1.8vh" class="text-muted"><abbr>Click here to learn more about unofficial translations</abbr></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 text-center">
                                <span style="font-size: 1.8vh" class="text-muted">Change of language will remove written login and password.</span>
                            </div>
                        </div>
                    </div>

            </div>

Answer 1

Поскольку вы не показывали свой код рядом с раскрывающимся списком, я собираюсь угадать вашу остальную HTML-структуру.

Единственная проблема, которую я вижу из вашего кода, - у вас нет .row при использовании .col-*. Вы должны обернуть свои столбцы хотя бы строкой. Конечно, вне них у вас должно быть .container.

Во-вторых, у вас есть .container, вложенное в ваш <select>, а затем вы делаете col-12 внутри него. Зачем? Вы можете безопасно удалить .row и .col-12, если вы просто хотите создать строку, которая занимает 100% ширины. Bootstrap <div> например, aready делает это.

Я предполагаю, что у вас есть .container как самый дальний класс. У вас не должно быть другого .container, вложенного в другое. Вам нужен только один контейнерный класс на секцию.

После того, как я очистил ваш код, ваш пример работает нормально:

демо: https://jsfiddle.net/davidliang2008/jk7es2c8/22/

Опять же, мы понятия не имели, как выглядит ваша HTML-структура, и, поскольку вы не показываете свой код, ответ такого рода - то, что вы получите. Или даже ваш ОП будет помечен как не по теме, неясно и т. Д.