Fieldset 在 Twitter 下无法正确呈现 Bootstrap

Question

我正在尝试在使用 Bootstrap 的响应式网站的页面上使用 Fieldset。实际上，我正在尝试将 ASP.NET 面板控件与 GroupingText 属性集一起使用 - 但它实际上呈现为具有图例集的字段集，所以差异相同。该页面未正确呈现字段集。通常，使用字段集，您会在内容周围有一个边框，边框中嵌入了图例，如下所示（没有 Bootstrap 的同一站点）：

但是如果我包含 Bootstrap:

我查看了 bootstrap css 对字段集做了什么，但无法弄清楚是什么原因造成的。其他人在将字段集（或 ASP.NET 填充了 GroupingText 的面板）与 Bootstrap 结合使用时遇到问题吗？任何人都知道如何让 Bootstrap 正常呈现字段集？

Answer 1

这无疑不是您所希望的答案，但我能想到的只有一个选项可以帮助您在包含时根据需要呈现 fieldset 和 legend 元素bootstrap 在您的项目中：

有一个 CSS 属性调用 all，您可以在其中设置多个值。您可以阅读它 here. The value you'd be interested in though is initial. So a class with a property all: initial; will reset all of the selected element's properties to their initial values as defined in the CSS spec. After that you would have to style the legend and fieldset elements to how you want them rendered. I've provided some working code that will get you started. You can see it in action here。请注意 bootstrap 在此环境中，如果您删除所有 CSS，您将看到呈现 bootstrap 的样式。

样本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;
}

Fieldset 在 Twitter 下无法正确呈现 Bootstrap

Fieldset not rendering correctly under Twitter Bootstrap

asp.net

panel

fieldset

twitter-bootstrap