BootStrap select имеет неправильную ширину при добавлении 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>
@NicolásAlarcónRapela Пожалуйста, не вводить благодарности в любые посты. Я знаю, что вы должны иметь 6 символов, чтобы отправить редактирование, но добавление «спасибо» и тому подобное с большей вероятностью приведет к тому, что ваши правки будут отклонены, а не одобрены, если в противном случае это несущественно.
забыл, добавил код
Ответы 1
Поскольку вы не показали свой код рядом с отображаемым раскрывающимся списком, я собираюсь угадать вашу остальную HTML-структуру.
Единственная проблема, которую я вижу из вашего кода, заключается в том, что у вас нет .row при использовании .col-*. Вам нужно обернуть столбцы хотя бы строкой. Конечно, помимо них у вас должен быть .container.
Во-вторых, у вас есть .container, вложенный в ваш <select>, а затем вы делаете col-12 внутри него. Почему? Вы можете безопасно удалить .row и .col-12, если вы просто хотите создать строку, которая занимает 100% ширины. Начальная загрузка<div>, например, так и делает.
Я предполагаю, что у вас есть .container как самый дальний класс. У вас не должно быть другого .container, вложенного в другое. Вам нужен только один класс контейнера на раздел.
После того, как я очистил ваш код, ваш пример работает нормально:
демо:https://jsfiddle.net/davidliang2008/jk7es2c8/22/
Опять же, мы понятия не имели, как выглядит ваша HTML-структура, и, поскольку вы не показываете свой код, именно такой ответ вы и получите. Или даже ваш ОП будет помечен как не по теме, неясно и т. д.
пожалуйста, добавьте свой html