Bootstrap开发问题求助：Navbar后的页面内容被错误嵌套进导航栏容器

你遇到的问题核心是PHP代码中的语法错误，导致导航栏的闭合标签没有被输出，浏览器只能自动解析未闭合的标签，从而把#main div错误嵌套到导航栏内部。

具体来说，你在PHP代码中错误地使用了HTML实体"来代替PHP的引号语法，这会让PHP无法正确解析代码，从而在执行到foreach循环时中断，导致导航栏的<ul>、<div>和<nav>标签都没有被闭合。

解决方案：修正PHP中的引号和HTML标签写法 #

把代码中所有的HTML实体（<、>、"）替换成正常的HTML标签和PHP引号，同时修正字符串拼接的语法：

修正后的AppView类代码 #

class AppView {
    public function showTemplateHead() {
        $ausgabe = '<!DOCTYPE html>'.
        '<html>'.
        '<head>'.
        '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">'.
        '<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>'.
        '<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>'.
        '<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>'.
        '<script type="text/javascript" src="script.js"></script>'.
        '<meta name="viewport" content="width=device-width, initial-scale=1.0">'.
        '<title>Valorant Line-Ups</title>'.
        '</head>'.
        '<body>';
        $ausgabe .= $this->showNavbar();
        $ausgabe .= '<div id="main">';
        return $ausgabe;
    }

    public function showTemplateFooter() {
        $ausgabe = ' </div> </body> </html>';
        return $ausgabe;
    }

    public function showNavbar() {
        $ausgabe = '';
        $ausgabe .= '<nav class="navbar navbar-light bg-light">'.
        '<a class="navbar-brand" href="#">Valorant Line-ups</a>'.
        '<div class="dropdown">'.
        '<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">'.
        'Choose Map'.
        '</button>'.
        '<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">';
        // 修正scandir的引号写法，PHP使用正常双引号
        foreach (array_diff(scandir("img/maps"), array('..', '.')) as $map) {
            // 修正字符串拼接，确保PHP正确解析变量
            $ausgabe .= '<li data-id="' . $map . '"><a class="dropdown-item dropMap">' . substr($map, 0, -4) . '</a></li>';
        }
        $ausgabe .= '</ul>'.
        '</div>'.
        '</nav>';
        return $ausgabe;
    }
}

关键修正点 #

1. 替换HTML实体：把<换成<、>换成>，这些是HTML标签的正常写法，PHP可以直接输出，不需要转成实体。
2. 修正引号语法：把"换成正常的双引号"，PHP中字符串内的双引号无需额外转义（只要字符串用单引号包裹，或双引号字符串内的双引号用\"转义即可）。
3. 修复foreach循环拼接：确保变量和字符串的拼接符合PHP语法，避免代码中断。

额外建议 #

你同时引入了Bootstrap 4的CSS和Bootstrap 5的JS，版本不匹配可能导致导航栏交互异常，建议统一使用同一版本的Bootstrap（比如全部升级到Bootstrap 5）。

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