Twitter Bootstrap改变了fieldset图例的渲染，为什么？

Question

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

左边的标准图例渲染，pre-Bootstrap，右边的Bootstrap影响渲染：

更新 我发现造成破坏渲染的原因至少是：Bootstrap将图例的宽度属性更改为100％，将border-bottom属性更改为＆＃39; 1px solid＆＃39;。这会导致图例右侧的原始边框被删除，而其下方的边框则会出现。问题是这是如何工作的。也许MVC的CSS（Site.css）干扰了Bootstrap的那个？

Answer 1

如果你切换样式表声明以便引导程序是最后一个它应该纠正问题，即：

<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" />

引导样式

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

最终结果应如下所示：

vs相反的方式（最后声明的MVC默认样式）

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