Question

我正在创建登录页面，并希望在选择之前添加图标，然后加上前缀，这表明您可以在此处更改语言，当我添加它时，选择宽度变得错误，右侧有点太大（例如下面的屏幕截图）

screenshot

<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。为什么？如果您只想创建宽度为100％的行，则可以安全地删除.row和.col-12。例如， Bootstrap <div>就是aready。

我假设您有一个.container作为最外来的人。您不应将另一个.container嵌套在另一个内部。每个部分只需要一个容器类。

清理代码后，您的示例运行正常：

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

同样，我们不知道您的HTML结构如何，并且由于您不显示代码，因此您将获得这种答案。甚至您的OP都将被标记为主题外，不清楚等。

BootStrap添加前缀时选择错误的宽度

1 个答案: