使用twitter bootstrap渲染primefaces bootstrap主题的问题[重复]答案

【问题标题】：Problems primefaces bootstrap theme render with twitter bootstrap [duplicate]使用twitter bootstrap渲染primefaces bootstrap主题的问题[重复]
【发布时间】：2015-03-22 14:08:21
【问题描述】：

我正在尝试将 Primefaces 5.1 与 Twitter Bootstrap 3.3.4 一起使用

我已在 facelets 模板 <h:head> 部分中添加了以下代码的文件

<h:head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
</head>

Web.xml

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

我正在尝试使用 selectCheckboxMenu 组件

<h:panelGrid columns="2" cellpadding="5" cellspacing="5" >
  <p:outputLabel value="Companies sector"/>
  <p:selectCheckboxMenu value="#{operations.selectedSectors}" label="Choose"
                      filter="true" filterMatchMode="startsWith" panelStyle="width:250px" style="margin-right: 5px">
     <f:selectItems value="#{operations.sectors}" />
</p:selectCheckboxMenu>
...

渲染

当我删除引导程序时

Cellpadding 和 cellspacing 效果不如所见。

我试过<f:facet name"first">和<f:facet name"last">和<f:facet name"middle">

我该如何解决这个问题？

【问题讨论】：

您最喜欢的浏览器是否正确呈现bootstrap.min.css 从这些图像中显示的内容？如果是，那么一些 CSS 类可能与一些底层 PrimeFaces CSS 类混合在一起。
@Tiny 可能。解决办法是什么？

标签： jsf primefaces twitter-bootstrap-3

【解决方案1】：

由于引导程序 3 的新盒子大小，它们不能一起工作。

另见

Using PrimeFaces with Bootstrap causes changes in padding/sizing/borders

【讨论】：