PrimeFaces 组件看起来与展示中的不同答案

【问题标题】：PrimeFaces component looks different than in showcasePrimeFaces 组件看起来与展示中的不同
【发布时间】：2016-09-06 16:16:11
【问题描述】：

我正在尝试使用： http://www.primefaces.org/showcase/ui/menu/breadcrumb.xhtml

在我的网站上我得到：

看起来箭头不在中间，字体很大，链接有下划线。如何将其更改为 PrimeFaces 展示中的类似内容？

我的主题是“引导程序”。我的 XHTML：

<?xml version='1.0' encoding='UTF-8' ?>
<!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:head>  

    <h:body>
        <p:breadCrumb>
            <p:menuitem value="Categories" url="#" />
            <p:menuitem value="Sports" url="#" />
            <p:menuitem value="Basketball" url="#" />
            <p:menuitem value="NBA" url="#" />
            <p:menuitem value="Teams" url="#" />
            <p:menuitem value="L.A. Lakers" url="#" />
            <p:menuitem value="Roster" url="#" />
            <p:menuitem value="Kobe Bryant" url="#" />
        </p:breadCrumb>
    </h:body>  
</html>

【问题讨论】：

这个 twitter boodstrap 有什么关系？
不是 ;-) 只是普通的 CSS
@JasperdeVries：我怀疑在真实版本中（不是上面的代码）OP 正在使用 twitter-bootstrap css（但是 OP 使用 primefaces 引导它们，正如您在回答中所说的那样可能是一个选项）

标签： css primefaces

【解决方案1】：

首先，您使用的是 Bootstrap 主题，而橱窗默认使用的是 Omega 主题。因此，首先确保您将展示设置为使用您在项目中使用的相同主题。您可以通过单击“PF 主题”按钮（使用 PC 时页面右上角最左侧的按钮）来实现。

然后使用浏览器的调试工具检查面包屑元素（或 PrimeFaces 展示中的任何内容）。你会注意到，在主题的 CSS 旁边，showcase.css 也被加载了。它的规则之一适用于所有小部件：

.ui-widget {
    font-size: 90%;
}

这导致您也遇到了差异（您的文字更大）。

如果您检查面包屑中的锚点，您会发现以下规则：

a {
    text-decoration: none;
    outline: none;
    color: #25AAE1;
}

可能还有更多的自定义。好好看看showcase.css。

如果您不熟悉调试工具，这是您可以期待的示例。此屏幕截图是使用 Chrome 拍摄的。在顶部你有网站。左侧是 DOM 树，在这种情况下最重要的是，右侧是所选节点上的应用规则。在每条规则上，您都可以看到它是从哪个样式表加载的。

如果您有兴趣（并使用 Chrome），可以使用很棒的 documentation on how to use the DOM inspector。

您发现（或至少在您的项目中想要）的任何差异都应该放在自定义样式表中。创建一个 CSS 文件，假设为 /webapp/resources/css/custom.css，并将其合并到模板的头部：

<h:head>
  ...
  <h:outputStylesheet name="css/custom.css"/>
</h:head>

【讨论】：

【解决方案2】：

在你的样式表中试试这个 CSS。

我希望这会奏效

CSS：

a {
  text-decoration: none;
  outline: none;
}

.ui-breadcrumb ul li {
  display: block;
  float: left;
  overflow: hidden;
  position: relative;
}

.ui-breadcrumb ul li a.ui-icon-home {
  margin-top: 1px;
  overflow: hidden;
  padding: 0;
}

.ui-widget-header a {
  color: #222;
}

.ui-breadcrumb ul li .ui-menuitem-link {
  display: block;
  float: left;
  margin-top: 3px;
  overflow: hidden;
  position: relative;
  color: #222;
  font-size: 90%;
}

.ui-breadcrumb-chevron {
  margin-top: 2px;
}

【讨论】：

请解释一下为什么您认为这可以解决这个问题？
我认为父标签设置了不同的 CSS 值。我说的对吗？
@marcin 是的，它呈现不同的值。尽管您也可以通过包含自定义 css 来覆盖这些值。对于实施，您可以阅读主题和自定义的简短文档here。