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

【问题标题】：Twitter Bootstrap changes rendering of fieldset legend, why?Twitter Bootstrap 更改了字段集图例的渲染，为什么？
【发布时间】：2012-07-13 10:40:24
【问题描述】：

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

左侧是标准图例渲染，预引导，右侧是受引导影响的渲染：

更新： 我至少找到了导致渲染中断的原因：Bootstrap 将图例的宽度属性更改为 100%，将边框底部属性更改为“1px solid”。这会导致图例右侧的原始边框被删除，而在其下方出现一个边框。问题是这是如何工作的。也许MVC的CSS（Site.css）干扰了Bootstrap？

【问题讨论】：

这可能是宽度问题。尝试更改文本的长度、legend 的宽度或填充。只是初步猜测
你的传奇的 CSS 是什么？我只是得到一个border-bottom:1px？
我看到 Bootstrap 添加了一个 width: 100% 和一个 border-bottom: 1px solid 属性，这会导致这种行为。第一个属性使右侧的原始行消失，而第二个属性使图例下方的行出现。不确定 Bootstrap 在这里尝试做什么。

标签： css asp.net-mvc asp.net-mvc-3 twitter-bootstrap

【解决方案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 样式表并使用引导程序以及您需要的任何自定义样式。

【讨论】：