Question

我正在使用Spring MVC 4开发一个Web应用程序。我使用Spring Roo生成了应用程序的基础。现在我正在使用Spring Tiles 2.2.2在前端工作。我下载了一个响应式模板并拆分代码以适应模板的每个部分。

问题是当我尝试加载索引时，会忽略css样式或类似的东西。

这是原始模板

Original Template

这就是它与Spring的看法

My awful template

注意模板的基础（标题和菜单）是如何相同的，只有动态页面有问题。

这是我的代码：

WEB-INF /砖/瓷砖-definitions.xml中

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>

    <definition name="defaultTemplate" template="/WEB-INF/template/default/template.jsp">
        <put-attribute name="header" value="/WEB-INF/template/default/header.jsp" />
        <put-attribute name="menu" value="/WEB-INF/template/default/menu.jsp" />
        <put-attribute name="body" value="/WEB-INF/views/index.jspx" />
        <put-attribute name="footer" value="/WEB-INF/template/default/footer.jsp" />
    </definition>

</tiles-definitions>

WEB-INF /视图/ views.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
    "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
    "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">

<tiles-definitions>

  <definition name="index" extends="defaultTemplate">
    <put-attribute name="body" value="/WEB-INF/views/index.jspx" />
  </definition>

  <definition name="dataAccessFailure" extends="defaultTemplate">
    <put-attribute name="body" value="/WEB-INF/views/dataAccessFailure.jspx" />
  </definition>

  <definition name="resourceNotFound" extends="defaultTemplate">
    <put-attribute name="body" value="/WEB-INF/views/resourceNotFound.jspx" />
  </definition>

  <definition name="uncaughtException" extends="defaultTemplate">
    <put-attribute name="body" value="/WEB-INF/views/uncaughtException.jspx" />
  </definition>

  <definition name="home" extends="defaultTemplate">
    <put-attribute name="body" value="/WEB-INF/views/home.jspx" />
  </definition>  
</tiles-definitions>

WEB-INF /模板/默认/ template.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

<html>
<head>
<meta charset="UTF-8">
<title>AdminLTE | Dashboard</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="/sirc/resources/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="/sirc/resources/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="/sirc/resources/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="/sirc/resources/css/AdminLTE.css" rel="stylesheet" type="text/css" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
</head>
<body class="skin-blue">
    <tiles:insertAttribute name="header" />
    <div class="wrapper row-offcanvas row-offcanvas-left">
        <tiles:insertAttribute name="menu" />
        <tiles:insertAttribute name="body" />
    </div>

    <!-- jQuery 2.0.2 -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="/sirc/resources/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- AdminLTE App -->
    <script src="/sirc/resources/js/AdminLTE/app.js" type="text/javascript"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="/sirc/resources/js/AdminLTE/demo.js" type="text/javascript"></script>
</body>
</html>

WEB-INF /弹簧/ webmvc-config.xml中

<aside class="right-side">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Dashboard <small>Control panel</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Dashboard</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">

        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3>150</h3>
                        <p>New Orders</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                    <a href="#" class="small-box-footer"> More info <i
                        class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
      ...
    </section>
    <!-- /.content -->
</aside>

我尝试过的是将这些注释放在index.jsp

中

<jsp:directive.page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" session="false" autoFlush="true"  />

<jsp:output omit-xml-declaration="yes" doctype-root-element="html"
    doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />

我也试过这个stackoverflow question没有运气

提前致谢！

更新1

关注@Tung Vo建议我检查了css和js url，我发现我省略了一些文件。此外，我不知道为什么<textarea> </textarea>标签停止了正确的渲染，所以我修复了一些像这样的文本。通过这些调整，我的页面现在看起来像这样：

Update

但我不能让这些图标保持隐藏或遵守CSS

更新2 - 可能的解决方案（测试阶段）

我正在测试html元素的顺序，我发现此代码存在问题

<li>
   <a href="#">
      <i class="fa fa-dashboard"></i> 
      Home
    </a>
</li>

我改变了标签的顺序，代码就像这样

<li>
   <i class="fa fa-dashboard"> 
      <a href="#"> Home</a>
   </i>
</li>

现在正确显示主页图标，我想解决方法是更改图标顺序，然后才会使用CSS。

Answer 1

我不确定，但是当你改变时它可能已经修复了

<div class="icon">
  <i class="ion ion-bag"></i>
</div>

进入

<div>
   <i class="icon ion ion-bag"></i>
</div>

我刚刚检查过Ionic Icons（因为页面上同时显示了太多图标），这可能只是一个小标记问题。
正如在离子图标示例中所发现的那样，也许它只是例如<i class="icon ion-bag"></i>，但请试一试。

Answer 2

try

<!-- bootstrap 3.0.2 -->
<link href="${pageContext.servletContext.contextPath}/sirc/resources/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="${pageContext.servletContext.contextPath}/sirc/resources/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="${pageContext.servletContext.contextPath}/sirc/resources/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="${pageContext.servletContext.contextPath}/sirc/resources/css/AdminLTE.css" rel="stylesheet" type="text/css" />

Answer 3

问题解决了在图标和任何需要的地方添加空格。我想Spring正在渲染阶段从模板图标标签中删除自然空间。例子：

<div class="icon">
    <i class="ion ion-pie-graph">&#160;</i>
</div>
<a href="#" class="small-box-footer">
    More info <i class="fa fa-arrow-circle-right">&#160;</i>
</a>

另请注意，该空间已定义为 ，因为 在Spring Tiles中不起作用（或者至少对我不起作用）。

注意：我使用带JSPX扩展名的文件，JSP文件没有这个问题。

在Spring Tiles中插入页面时忽略CSS样式

3 个答案: