问题primefaces bootstrap主题渲染与twitter bootstrap

时间:2015-03-22 14:08:22

标签: jsf primefaces twitter-bootstrap-3

我正在尝试将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>
...

渲染

enter image description here

当我删除引导程序

enter image description here

Cellpadding和cellspacing不能正常工作。

我尝试了<f:facet name"first"><f:facet name"last">以及<f:facet name"middle">

如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

他们只是不能一起工作,因为新的盒子大小为3。

另见