使用Apache Tiles后Navbar无法铺满页面问题求助

我看了你的代码，很快就发现了两个核心问题，咱们一步步来搞定：

问题出在哪？ #

1. 表格布局拖了后腿：你把Navbar塞进了<table>的<td>里，HTML表格本来就不是用来做页面布局的，它默认不会占满整个页面宽度，单元格还会自动收缩适配内容，直接把Navbar的横向空间给限制死了，自然铺不满。
2. Bootstrap容器的小限制：你的Navbar里用了<div class="container">，这个类在Bootstrap 3里是固定宽度的（不同屏幕尺寸会调整，但始终是居中的固定宽度），就算去掉表格，Navbar的内容区域也不会铺满——不过这个是次要问题，先解决表格的问题再说。

怎么修复？ #

第一步：把表格布局换掉 #

直接删掉布局文件里的<table>、<tr>、<td>这些标签，改用最简单的块级元素布局，毕竟表格是用来展示数据的，不是搭页面架子的。修改后的布局文件应该是这样：

<%@ 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" />
    <c:url value="/css/main.css" var="jstlCss" />
    <link href="${jstlCss}" rel="stylesheet" />
</head>
<body>
    <tiles:insertAttribute name="menu" />
    <tiles:insertAttribute name="header" />
    <tiles:insertAttribute name="body" />
    <tiles:insertAttribute name="footer" />
</body>

第二步：按需调整Navbar的容器（可选） #

如果你希望Navbar的内容也铺满整个页面（而不是居中固定宽度），把Navbar里的<div class="container">改成<div class="container-fluid">就行：

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <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>

要是你只想让Navbar的背景铺满，内容保持居中固定，那只需要完成第一步就够了。

第三步：检查样式（放心，你的main.css没问题） #

看了你的main.css，只有h1和h2的颜色设置，不会影响Navbar的宽度，所以这一步可以跳过，除非你之后加了其他样式。

最后测试 #

改完之后重启应用，刷新页面，Navbar应该就能乖乖铺满整个页面啦！要是还有问题，先看看浏览器控制台有没有报错，确认Bootstrap的CSS是不是加载正确了就行。

内容的提问来源于stack exchange，提问作者mrk