在这个ASP.NET MVC 3项目中,我刚刚开始尝试使用Twitter Bootstrap,但我注意到它与< fieldset>的呈现混淆了.传说.这里的图例渲染发生了什么,如何让它恢复正常？也就是说,我想让右边的线再次与左边的线垂直对齐.
左侧是标准图例渲染,前引导程序,右侧是受Bootstrap影响的渲染：
更新：
我发现造成破坏渲染的原因至少是：Bootstrap将图例的width属性更改为100％,将border-bottom属性更改为’1px solid’.这会导致图例右侧的原始边框被删除,而其下方的边框则会出现.问题是这是如何工作的.也许MVC的CSS(Site.css)干扰了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" />
引导样式
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以及您需要的任何自定义样式.
