我正在尝试让PrimeFaces Grid CSS工作,但它不起作用。我遵循了PrimeFaces页面上的示例,但是当我通过浏览器运行它时,所有DIV条目都显示在垂直列表中。错误在哪里?我有以下XHTML:
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head/>
<h:body>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">Col1</div>
<div class="ui-grid-col-4">Col2</div>
<div class="ui-grid-col-4">Col2</div>
</div>
</div>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-8">8</div>
</div>
</div>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-8">8</div>
</div>
</div>
<div class="ui-grid ui-grid-fixed">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-8">8</div>
</div>
</div>
</h:body>
</html>
如果页面上没有 PF 组件,则需要手动添加它。
<h:outputStylesheet name="grid/grid.css" library="primefaces" />
它
看起来像素数.css不包括在内。 所以应该至少是一个 XHTML 页面中的 primefaces 组件。 试试这个:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head/>
<h:body>
<p:outputPanel>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">Col1</div>
<div class="ui-grid-col-4">Col2</div>
<div class="ui-grid-col-4">Col2</div>
</div>
</div>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-8">8</div>
</div>
</div>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-8">8</div>
</div>
</div>
<div class="ui-grid ui-grid-fixed">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-8">8</div>
</div>
</div>
</p:outputPanel>
</h:body>
</html>
实际上我遇到了同样的问题。重要的部分是,网格布局仅从版本 5.1 开始受支持!