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

Question

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

左侧是标准图例渲染,前引导程序,右侧是受Bootstrap影响的渲染:

更新: 我发现造成破坏渲染的原因至少是:Bootstrap将图例的宽度属性更改为100%,将border-bottom属性更改为"1px solid".这会导致图例右侧的原始边框被删除,而其下方的边框则会出现.问题是这是如何工作的.也许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以及您需要的任何自定义样式.