bootstrap中，navbar 宽度等同浏览器窗口问题。

来源：互联网发布：java 取svn版本号编辑：程序博客网时间：2024/06/03 14:24

用公司的bootstrap 主题模板。

正常样式如图下：

html代码为：

生成的页面代码是：

在整合项目时，需要把页面中引用的 js 和css拆出来。

并改用jsp，不用html来写页面。

并且引入一系列标签等等。

引入代码如下：（下面的代码是错误的。）

index.html 改完 index.jsp 代码如下

<%@ page contentType="text/html;charset=UTF-8"%><%@ include file="/pages/commons/baseindex.jsp" %><%@ include file="/pages/commons/baseheadC.jsp" %><%@ include file="/pages/commons/basefootC.jsp" %><%@ include file="/pages/commons/context.jsp" %><!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>主页</title>

baseindex.jsp代码如下：（下面的代码是错误的，是更改之前的。）

<%@ page contentType="text/html;charset=UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%><%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%><c:set var="ctx" value="${pageContext.request.contextPath}"/><input type="hidden" id="ctx" value="${pageContext.request.contextPath}"/>

baseheadC.jsp:(错误代码)

<%@ page contentType="text/html;charset=UTF-8"%><link rel="stylesheet" href="${ctx}/pages/assets/css/bootstrap.min.css" /><link rel="stylesheet" href="${ctx}/pages/assets/css/font-awesome.min.css" />

basefootC.jsp（错误代码）

<%@ page contentType="text/html;charset=UTF-8"%><script src="${ctx}/pages/assets/js/ace-extra.min.js"></script><script src="${ctx}/pages/assets/js/flot/jquery.flot.pie.min.js"></script><script src="${ctx}/pages/assets/js/flot/jquery.flot.resize.min.js"></script><script src="${ctx}/pages/assets/js/ace-elements.min.js"></script><script src="${ctx}/pages/assets/js/ace.min.js"></script><script src="${ctx}/pages/assets/js/bootbox.min.js"></script><!-- jquery.form.js --><script src="${ctx}/js/jquery.form.js"></script>

context.jsp是空文件。

结果，样式如下图所示：

浏览器窗口有多大，宽度就有多高。

但是页面中，其他的样式均没有错误。

最后问题解决了，但是没有找到原因。

页面没有任何错误，所有资源都正常请求成功。

我感觉应该是css的问题（肯定是）。

修改1、

修改css引入的baseheadC.jsp如下：

<%@ page contentType="text/html;charset=UTF-8"%><!DOCTYPE html><head><link rel="stylesheet" href="${ctx}/pages/assets/css/bootstrap.min.css" /><link rel="stylesheet" href="${ctx}/pages/assets/css/font-awesome.min.css" /></head>

在<link>标签外部，嵌套 <head>标签。

修改2、

在js引用的basefootC.jsp，外部嵌套<head>标签。（其中引用的js资源个数，多少不用在意。）

<%@ page contentType="text/html;charset=UTF-8"%><!DOCTYPE html><head><script src="${ctx}/pages/assets/js/jquery-ui-1.10.3.custom.min.js"></script><script src="${ctx}/pages/assets/js/jquery.ui.touch-punch.min.js"></script><script src="${ctx}/pages/assets/js/jquery.slimscroll.min.js"></script></head>

修改3、

baseindex.jsp中的

<input type="hidden" id="ctx" value="${pageContext.request.contextPath}"/>

迁移到context.jsp中。

页面显示正常。

有这么几点不理解。

1、修改之前的代码，js和css均可以成功请求。也没有啥资源请求不到。

也只有这一个地方显示的不标准。

2、baseindex.jsp中，迁出的代码。

迁出之前，生成的html代码：<input type="hidden" id="ctx" value="/LoginSystem"> ,会出现在所有引用之前，可能对样式会造成某些干扰。

迁出之后，生成的html，在body 中，这个倒是可以理解了，按照加载顺序来的么。

如果有任何疑问，或者感觉我说的有任何不妥之处，麻烦您跟我说一下，我马上更正，避免误导更多的人。

写博客的目的是为了更好的学习和交流，谢谢。

QQ：1286238812

0 1