css - Twitter Bootstrap 更改了字段集图例的渲染，为什么？

Question

在这个 ASP.NET MVC 3 元素中，我刚刚开始尝试使用 Twitter Bootstrap，但我注意到它与 <fieldset> 的呈现混为一谈。传说。这里的图例渲染发生了什么，我如何让它恢复正常？也就是说，我希望右边的线再次与左边的线垂直对齐。

标准图例渲染，预 Bootstrap ，在左边，受 Bootstrap 影响的渲染在右边:

更新:我已经找出导致渲染损坏的原因，至少:Bootstrap 将图例的宽度属性更改为 100%，将 border-bottom 属性更改为“1px solid”。这会导致图例右侧的原始边框被删除，并出现其下方的边框。问题是这是如何工作的。也许 MVC 的 CSS (Site.css) 正在干扰 Bootstrap 的 CSS？

Answer 1

如果您切换您的样式表声明，使 Bootstrap 在最后，它应该更正问题，即:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />

Bootstrap 样式

fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 27px;
    font-size: 19.5px;
    line-height: 36px;
    color: #333;
    border: 0;
    border-bottom: 1px solid #E5E5E5;
}

默认 MVC Style.css 样式

fieldset {
    border: 1px solid #DDD;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

最终结果应该是这样的:

与相反(最后声明的 MVC 默认样式)

或者，完全摆脱 MVC 样式表并使用 Bootstrap 以及您需要的任何自定义样式。