8

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

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

普通图例 Twitter 引导图例

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

4

1 回答 1

8

如果您切换样式表声明以使引导程序位于最后，则应该更正该问题，即：

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

最终结果应如下所示：

在此处输入图像描述

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

在此处输入图像描述

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

于 2012-07-13T18:54:17.613 回答