css - 将 PrimeFaces 与 Bootstrap 一起使用会导致填充/大小/边框发生变化

Question

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

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

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

看我试过了:

<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>

看看我的 CSS:

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

看看我的datatable picture :

Answer 1

几乎所有其他组件都将失败，看起来和感觉都很明智。由于 bootstrap 3 切换到 different box-sizing (边框框而不是内容框)。所以很多很多小的 ui 东西会在 PF 组件中失败，比如选择列表中的图标被错误定位等......在我看来很难修复所有这些。

如果你想为响应式布局使用 bootstrap，PF 类似的东西，叫做 grid css和 more is comming