我有一个问题,我的导航栏不适合整个页面,如下所示: 它发生在我实现 Apache Tiles 进行模板化之后
我的menu.jsp是:
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Spring Boot</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/flight_information_display">Home</a></li>
<li><a href="/flight_information_display/about">About</a></li>
</ul>
</div>
</div>
</nav>
为什么导航栏不适合整个页面? 我还使用 Apache Tiles 进行模板化,我的布局是:
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
<head>
<title><tiles:getAsString name="title" /></title>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<!--
<spring:url value="/css/main.css" var="springCss" />
<link href="${springCss}" rel="stylesheet" />
-->
<c:url value="/css/main.css" var="jstlCss" />
<link href="${jstlCss}" rel="stylesheet" />
</head>
<body>
<table>
<tr>
<td>
<tiles:insertAttribute name="menu" />
</td>
</tr>
<tr>
<td>
<tiles:insertAttribute name="header" />
</td>
</tr>
<tr>
<td>
<tiles:insertAttribute name="body" />
</td>
</tr>
<tr>
<td>
<tiles:insertAttribute name="footer" />
</td>
</tr>
</table>
</body>
主.css
h1{
color:#0000FF;
}
h2{
color:#FF0000;
}
如果您需要提供任何其他代码,请告诉我。 非常感谢提前
我怀疑以下内容:
/css/main.css or <link href="${jstlCss}" rel="stylesheet" />
将所有内容拉到左侧:当您使用“容器”类时,您的菜单栏+导航应显示在中间,并在两侧进行填充。看起来内边距是正确的,但页面被向左拉了。
注意:container-fluid,导致布局没有这种集中布局,有padding。
你的问题在于其他CSS(main.css或${jstlCss})。您可以使用F12调试器来查找问题。寻找删除填充的样式。
我怀疑你的main.css中有一个名为“container”的类
或
<link href="${jstlCss}" rel="stylesheet" />
尝试将
.full-width { width: 100%; }
类添加到您的 div 中,就像这样 <div class="container full-width">
。如果这不起作用,请尝试检查您的导航栏类,以便您可以在 CSS 文件中修改它们。
编辑:
这是bootstrap常用的导航栏:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
将宽度增加至 100%。尝试下面的片段
.navbar {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Spring Boot</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/flight_information_display">Home</a></li>
<li><a href="/flight_information_display/about">About</a></li>
</ul>
</div>
</div>
</nav>
已编辑
更改上述代码的格式
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
<head>
<title><tiles:getAsString name="title" /></title>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<!--
<spring:url value="/css/main.css" var="springCss" />
<link href="${springCss}" rel="stylesheet" />
-->
<c:url value="/css/main.css" var="jstlCss" />
<link href="${jstlCss}" rel="stylesheet" />
</head>
<body>
<div>
<tiles:insertAttribute name="menu" />
</div>
<div>
<tiles:insertAttribute name="header" />
</div>
<div>
<tiles:insertAttribute name="body" />
</div>
<div>
<tiles:insertAttribute name="footer" />
</div>
</body>
我可以通过更改图块布局来解决我的问题。 我用div代替table
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
<head>
<title><tiles:getAsString name="title" /></title>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<!--
<spring:url value="/css/main.css" var="springCss" />
<link href="${springCss}" rel="stylesheet" />
-->
<c:url value="/css/main.css" var="jstlCss" />
<link href="${jstlCss}" rel="stylesheet" />
</head>
<body>
<div>
<tiles:insertAttribute name="menu" />
</div>
<div>
<tiles:insertAttribute name="header" />
</div>
<div>
<tiles:insertAttribute name="body" />
</div>
<div>
<tiles:insertAttribute name="footer" />
</div>
</body>
你的CSS代码在哪里:
.navbar {
/* ... (existing styles) ... */
/* Add the following properties */
width: 100%; /* Make the navbar take up the full width of the screen */
position: fixed; /* Fix the navbar at the top of the screen */
left: 0;
right: 0;
}