0
我是一個的JavaEE/JSF初學者，要加載PrimeFaces組件在儀表板/引導主題免費提供：http://www.creative-tim.com/product/light-bootstrap-dashboard非裝載PrimeFaces組件
有些加載（按鈕），有些則不是（圖表，用於例）。我想加載動畫圖表：http://www.primefaces.org/showcase/ui/chart/animate.xhtml（這個例子其實）
該組件是完全加載一個空白頁上：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:chart type="line" model="#{chartView.animatedModel1}" style="width:400px;" />
</h:body>
</html>
然而，這不是與整個設計裝入：
<div class="row">
<div class="col-md-4">
<div class="card">
<p:chart type="line" model="#{chartView.animatedModel1}" style="width:400px;" />
</div>
</div>
<div class="col-md-8">
<div class="card">
</div>
</div>
</div>
這裏是「卡」的CSS：
.card {
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(63, 63, 68, 0.1);
background-color: #FFFFFF;
margin-bottom: 30px;
}
.card .image {
width: 100%;
overflow: hidden;
height: 260px;
border-radius: 4px 4px 0 0;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card .image img {
width: 100%;
}
.card .filter {
position: absolute;
z-index: 2;
background-color: rgba(0, 0, 0, 0.68);
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
opacity: 0;
filter: alpha(opacity=0);
}
.card .filter .btn {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.card:hover .filter {
opacity: 1;
filter: alpha(opacity=100);
}
.card .btn-hover {
opacity: 0;
filter: alpha(opacity=0);
}
.card:hover .btn-hover {
opacity: 1;
filter: alpha(opacity=100);
}
.card .content {
padding: 15px 15px 10px 15px;
}
.card .header {
padding: 15px 15px 0;
}
.card .category,
.card label {
font-size: 14px;
font-weight: 400;
color: #9A9A9A;
margin-bottom: 0px;
}
.card .category i,
.card label i {
font-size: 16px;
}
.card label {
font-size: 12px;
margin-bottom: 5px;
text-transform: uppercase;
}
.card .title {
margin: 0;
color: #333333;
font-weight: 300;
}
.card .avatar {
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;
}
.card .description {
font-size: 14px;
color: #333;
}
.card .footer {
padding: 0;
background-color: transparent;
line-height: 30px;
}
.card .footer .legend {
padding: 5px 0;
}
.card .footer hr {
margin-top: 5px;
margin-bottom: 5px;
}
.card .stats {
color: #a9a9a9;
}
.card .footer div {
display: inline-block;
}
.card .author {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.card .author i {
font-size: 14px;
}
.card h6 {
font-size: 12px;
margin: 0;
}
.card.card-separator:after {
height: 100%;
right: -15px;
top: 0;
width: 1px;
background-color: #DDDDDD;
content: "";
position: absolute;
}
.card .ct-chart {
margin: 30px 0 30px;
height: 245px;
}
.card .table tbody td:first-child,
.card .table thead th:first-child {
padding-left: 15px;
}
.card .table tbody td:last-child,
.card .table thead th:last-child {
padding-right: 15px;
}
.card .alert {
border-radius: 4px;
position: relative;
}
.card .alert.alert-with-icon {
padding-left: 65px;
}
我真的不明白爲什麼牛逼他生成的JavaScript不能執行（或者它可能被設計隱藏了嗎？），有沒有人有任何想法或這是否需要額外的細節？謝謝
編輯：喬納森Crégut釘了它！
開始剝離您的CSS ...一次一行，看看它什麼時候變得可見 – Kukeltje
下次在webbrowser中按下F12查找線索。 – BalusC