时间戳

首页 > 解决方案 > 为什么我的选择元素隐藏了进行中的元素？

html - 为什么我的选择元素隐藏了进行中的元素？

问题描述

目前正在尝试使用引导程序设置响应式表单的样式。在应用引导程序之前，这个表单实际上没有在单独的 css 文件中应用任何响应式设计，一切都是纯粹的类型和效果。

但是我在这个表单中的选择元素有很多问题。

无论出于何种原因，在一系列成对的单选按钮（它们本身分组在字段集中）之前的选择元素正在切断第一个单选输入的图例元素和标签元素。它看起来像这样：

选择使用元素选择器查看的元素

看起来内容框占用了大量空间。或者该空间是为活动选择下拉菜单“保存”的？我不知道为什么那里有这么多蓝色^_^我可能错过了一些非常简单的东西。

我已经将选择元素分割（使用语义部分），我已经将它包装在它自己的行中，我已经尝试应用一些小但明显的额外边距底部（例如 mb-4）。

这些都没有奏效。这是我在这个特定部分的代码：

            <section class="col-8 col-md-4" id="recommend">
                <label class="col-form-label" for="select">Would you recommend your stay at the Aperture
                    Science computer-aided Enrichment Center?</label>
                <select class="form-control mb-5" name="select" id="select" required>
                    <option value="">-- Please select an option --</option>
                    <option value="yes">Yes</option>
                    <option value="absolutely">Absolutely</option>
                    <option value="of_course">Of course!</option>
            </section>

有任何想法吗？:D

标签： htmlcsstwitter-bootstrap

解决方案

您可能应该结束您的<select>元素，因为这可能会对 DOM 的其余部分产生未知的影响。

<select class="form-control mb-5" name="select" id="select" required>
                <option value="">-- Please select an option --</option>
                <option value="yes">Yes</option>
                <option value="absolutely">Absolutely</option>
                <option value="of_course">Of course!</option>
</select> <!-- <- this was missing -->

推荐阅读