在这个 ASP.NET MVC 3 元素中,我刚刚开始尝试使用 Twitter Bootstrap,但我注意到它与 <fieldset>
的呈现混为一谈。传说。这里的图例渲染发生了什么,我如何让它恢复正常?也就是说,我希望右边的线再次与左边的线垂直对齐。
标准图例渲染,预 Bootstrap ,在左边,受 Bootstrap 影响的渲染在右边:
更新: 我已经找出导致渲染损坏的原因,至少:Bootstrap 将图例的宽度属性更改为 100%,将 border-bottom 属性更改为“1px solid”。这会导致图例右侧的原始边框被删除,并出现其下方的边框。问题是这是如何工作的。也许 MVC 的 CSS (Site.css) 正在干扰 Bootstrap 的 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" />
Bootstrap 样式
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 样式表并使用 Bootstrap 以及您需要的任何自定义样式。
关于css - Twitter Bootstrap 更改了字段集图例的渲染,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11472866/