目前正在尝试使用bootstrap样式响应表单。在应用bootstrap之前，这个表单实际上并没有在单独的css文件中应用任何响应式设计，所有的东西都是纯粹的类型和效果。
但是我在这个表单中有很多选择元素的问题。
无论出于何种原因，出现在一系列成对的单选按钮(它们本身分组在字段集中)之前的select元素将会切断第一个单选输入的legend元素和label元素。它看起来像这样:
选择查看的元素
看起来content-box占用了大量的空间。或者空间被"节省"了。对于一个活动选择下拉菜单?我不知道为什么那里有这么多蓝色^_^我可能错过了一些非常简单的东西。
我已经将select元素分隔开(使用语义部分)，我已经将它包装在自己的行中，我已经尝试应用一些小但明显的额外margin-bottom(例如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
您可能应该结束您的<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 -->