使用PrimeFaces与Bootstrap会导致填充/调整大小/边框的变化 [英] Using PrimeFaces with Bootstrap causes changes in padding/sizing/borders

问题描述

好吧，我禁用了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 = -responsive> 
< p：dataTable rowKey =＃{banca.id}
 var =banca
 value =＃{bancaMB.beans}
 paginator =true 
 emptyMessage =Nãofoi 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; 
} 
  

查看我的和更多是在交往

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