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

【问题标题】：Using PrimeFaces with Bootstrap causes changes in padding/sizing/borders将 PrimeFaces 与 Bootstrap 一起使用会导致填充/大小/边框发生变化
【发布时间】：2015-03-26 20:17:59
【问题描述】：

好吧，我禁用了 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，边框会消失，但引导样式边框也会消失。

我试过了：

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

【问题讨论】：

如果您将 PrimeFaces 主题设置为无，PrimeFaces 组件将呈现为没有主题。它不仅限于<p:dataTable>，而且几个 PrimeFaces 的 UI 组件将在没有主题的情况下运行。因此，即使您在将主题设置为无后偶然成功地对数据表应用了体面的外观/布局，其余组件也需要特别注意主题。这不应该是您可能要寻找的。无论如何，您将需要单独处理任何与 twitter 引导相关的东西（引导布局或任何东西）。
是的，几乎所有其他组件在外观和感觉上都会失败。由于 bootstrap 3 切换到不同的box-sizing，很多很多小的 ui 事情都会失败，比如选择列表中的图标位置错误等等......我怀疑你想要纠正所有这些。
所以，最好的解决方案是放弃并使用带有 bootstrap-primefaces 主题的 primefaces 组件？
取决于...你想用 bootstrap 做什么？菜单？响应式用户界面？成分？检查例如这个：primefaces.org/showcase/ui/data/datatable/responsive.xhtml
我将引导程序用于响应式用户界面、组件布局和菜单。我不想启用“bootstrap-primefaces”，因为会与 bootstrap 冲突。

标签： css twitter-bootstrap jsf primefaces

【解决方案1】：

几乎所有其他组件在外观和感觉上都会失败。由于 bootstrap 3 切换到different box-sizing（边框框而不是内容框）。所以在 PF 组件中很多很多小的 ui 东西都会失败，比如选择列表中的图标被错误地定位等等......在我看来，很难解决所有这些问题。

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

【讨论】：