Fieldset在Twitter Bootstrap下无法正确呈现

Question

我正在尝试在使用Bootstrap的响应式网站中的页面上使用Fieldset。实际上，我正在尝试使用具有GroupingText属性集的ASP.NET Panel控件 - 但实际上它呈现为带有图例集的字段集，因此具有相同的差异。页面未正确呈现字段集。通常情况下，使用字段集，您可以获得围绕内容的边框，并在边框中嵌入图例，如下图所示（相同的网站没有Bootstrap）：

但如果我包含Bootstrap，那么这就是它的样子：

我已经看过bootstrap css用fieldsets做了什么，但是无法弄清楚导致它的原因。其他人在使用字段集（或填充了GroupingText的ASP.NET面板）与Bootstrap一起时遇到问题？任何人都知道如何让Bootstrap正常渲染场集？

Answer 1

这不可能是你所希望的答案，但是我只能想到一个选项，当你包含bootstrap时，它将有助于呈现fieldset和legend元素。你的项目：

有一个CSS属性调用all，它有几个可以在其上设置的值。你可以阅读它here。您感兴趣的值是initial。因此，具有属性all: initial;的类会将所有选定元素的属性重置为CSS规范中定义的初始值。之后，您必须将legend和fieldset元素设置为您希望它们呈现的样式。我已经提供了一些可以帮助您入门的工作代码。您可以在行动here中看到它。请注意，如果删除所有CSS，bootstrap就在这个环境中，你会看到bootstraps样式呈现。

示例HTML：

<fieldset class="reset-this redo-fieldset" style="margin-left: 10px;">
    <legend class="reset-this redo-legend">Name</legend>
    First Name: <input type="text"><br>
    Last Name: <input type="text"><br>
</fieldset>

示例CSS：

.reset-this {
  all: initial;
}

.redo-fieldset {
  border: 1px solid black;
  padding : 10px;
} 

.redo-legend {
  color: black;
}