将 PrimeFaces 与 Bootstrap 结合使用会导致内边距/大小/边框发生变化 [英] Using PrimeFaces with Bootstrap causes changes in padding/sizing/borders

问题描述

好吧，我禁用了 PrimeFaces 的所有主题:

<param-name>primefaces.THEME</param-name><param-value>none</param-value></context-param>

我这样做是因为我使用的是 bootstrap 3，我不想在 jquery-ui 和 bootstrap 布局中发生任何冲突.问题是没有主题"的 PrimeFaces 数据表变成了带有黑色边框的白表，如果我使用 border-style:none，边框会消失但引导样式边框会消失以及.

看我试过了:

<p:dataTable rowKey="#{banca.id}"var="banca"value="#{bancaMB.beans}"分页器=真"emptyMessage="Não foi encontrado nenhum registro"行=10"id="dataTableBancas"selection="#{bancaMB.bean}"tableStyleClass="table table-striped"selectionMode="single">..</数据表>

看看我的 CSS:

.ui-datatable thead th,.ui-datatable tbody，.ui-datatable tbody tr,.ui-datatable tbody td {边框样式:无！重要；}

看我的(边框框而不是内容框).因此，PF 组件中会有很多小的 ui 问题会失败，例如选择列表中的图标位置错误等……在我看来，修复所有这些问题非常困难.

如果你想对响应式布局使用 bootstrap，PF 类似的东西，叫做 网格 css 和 更多即将推出

Well, I disabled all themes from PrimeFaces:

<context-param>  
    <param-name>primefaces.THEME</param-name>  
    <param-value>none</param-value>  
</context-param>

I do it because I'm using bootstrap 3 and I don't want to any conflicts in jquery-ui and bootstrap layout. The problem is that PrimeFaces datatable without "themes" becomes a white table with black borders, if I use the border-style:none, the border disappears but bootstrap style border disappears as well.

Look I tried:

<div class="table-responsive">
    <p:dataTable rowKey="#{banca.id}"
                 var="banca"
                 value="#{bancaMB.beans}"
                 paginator="true"
                 emptyMessage="Não foi encontrado nenhum registro" 
                 rows="10"
                 id="dataTableBancas"
                 selection="#{bancaMB.bean}"
                 tableStyleClass="table table-striped"
                 selectionMode="single">
..
</dataTable>

Look my CSS:

.ui-datatable thead th,
.ui-datatable tbody,
.ui-datatable tbody tr,
.ui-datatable tbody td {
    border-style: none !important;
}

Look my datatable picture:

解决方案

Almost all other components will fail to, look and feel wise. Since bootstrap 3 switched to a different box-sizing (border-box instead of content-box). So lots and lots of small ui things will fail in PF components, like icons in selectlists being wrongly positioned etc... It is very difficult to fix all these in my opinion.

If you want to use bootstrap for the responsive layout things, PF something similar to, called the grid css and more is comming

这篇关于将 PrimeFaces 与 Bootstrap 结合使用会导致内边距/大小/边框发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！