我尝试为 PrimeFaces (10.0.0) 设置 PrimeFlex (3.0.1)。我使用了PrimeFlex repo的 dist 文件夹中提供的 css 文件。此外,我遵循 PrimeFaces ShowCase 中给出的说明,并在第一次试驾时使用了几个 flexbox 选项(如FlexBox 展示中给出的。
结果,我检索到一个似乎没有应用任何 PrimeFlex 类的页面。但为什么?
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>PrimeFlex in Action</title>
<h:outputStylesheet name="css/primeflex.css" />
</h:head>
<h:body>
Hello from PrimeFlex
<h2>Direction</h2>
<div class="p-d-flex p-flex-column p-flex-md-row">
<div class="p-mb-2 p-mr-2">Item 1</div>
<div class="p-mb-2 p-mr-2">Item 2</div>
<div class="p-mb-2 p-mr-2">Item 3</div>
</div>
<h2>Flex Container</h2>
<div class="p-d-flex">Flex Container</div>
<div class="p-d-inline-flex">Inline Flex Container</div>
<h2>Responsive</h2>
Row direction for larger screens and column for smaller.
<div class="p-d-flex p-flex-column p-flex-md-row card">
<div class="p-mb-2 p-mr-2">Item 1</div>
<div class="p-mb-2 p-mr-2">Item 2</div>
<div class="p-mb-2 p-mr-2">Item 3</div>
</div>
</h:body>
</html>
似乎检索到了 css 文件(查看 Chrome 开发人员工具的网络部分中显示的文件),但不知何故找不到/处理我的 web 应用程序。
另外,我在 web.xml 中添加了 FLEX 激活,但没有任何效果:
<context-param>
<param-name>primefaces.FLEX</param-name>
<param-value>true</param-value>
</context-param>
也试过使用 PrimeFlex 的整个 dist 文件夹,也没有任何改变。与移动h:outputStylesheet
到不同的位置和部分相同。