3

我在 Primefaces v3.5 项目中集成了 Twitter Bootstrap v2.3.1，我使用 Bootstrap 进行布局，使用 Primefaces 进行组件。

但是我在使用 DataTable 时遇到了一个问题，它的渲染效果并不好，如图所示： 在此处输入图像描述

通过使用 Firebug，我发现了问题，primefaces 输入的默认 css 被 Bootstrap 输入样式覆盖

以下是按顺序加载的样式表：

<link type="text/css" rel="stylesheet" href="/projet/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" />

<link type="text/css" rel="stylesheet" href="/projet/javax.faces.resource/bootstrap.css.xhtml?ln=css" />

<link type="text/css" rel="stylesheet" href="/projet/javax.faces.resource/bootstrap-responsive.css.xhtml?ln=css" />

<link type="text/css" rel="stylesheet" href="/projet/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" />

如您所见，theme.css 被 bootstrap.css 覆盖

那么有没有办法在 Bootstrap 之后加载所有 primefaces 样式表？还是有任何其他解决方案可以正确渲染 Primefaces 组件？

4

3 回答 3

2

我只需要在下载之前自定义（取消选中 Base CSS 下的表单）引导框架！

于 2013-03-14T10:31:54.200 回答
1

应用样式表没有硬性规定。

它完全取决于您，因此它不是更改样式表顺序的解决方案，在您的情况下，它已完成，!important但最好使用Chris Coyier 告诉您何时使用!importantCSS，因此级联内有助于在某处解决冲突的特异性机制可以提供帮助你在这。

您可以在站点点阅读它并在特异性计算器上测试您的。

于 2013-03-12T10:08:50.713 回答
1

这篇文章是葡萄牙语的，但是例子很简单，你可以下载 datatable.css，在你的项目中使用。

http://jnaldo.com/2013/03/deixando-a-datatable-do-primefaces-com-o-tema-do-twitter-bootstrap/

对不起我的“古老的凯尔特阿拉伯语英语”。

于 2013-03-18T22:15:08.293 回答