css - 添加前置时，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>

标签： cssbootstrap-4

由于您没有在呈现的下拉列表旁边显示您的代码，我将猜测您的其余 HTML 结构。

我从您的代码中看到的一个问题是您.row在使用.col-*. 你需要用至少一行来包装你的列。当然，在它们之外你应该有一个.container.

其次，你有一个.container嵌套在你的<select>中，然后你在col-12里面做。为什么？如果您只想创建一个占 100% 宽度的行，.row您可以安全地删除。Bootstrap例如aredy就是这样做的。.col-12 <div>

我假设你有一个.container最外面的班级。您不应该将另一个.container嵌套在另一个中。每个部分只需要一个容器类。

在我清理您的代码后，您的示例运行良好：

演示： https ://jsfiddle.net/davidliang2008/jk7es2c8/22/

同样，我们不知道您的 HTML 结构是什么样的，并且由于您不显示代码，因此您将得到这种答案。甚至您的 OP 也会被标记为离题、不清楚等。

css - 添加前置时，BootStrap 选择的宽度错误

问题描述

解决方案

推荐阅读