php - 为什么我的 bootstrap 导航栏在 bootstrap 4 中不显示内联？

<分区>

我在 php 中创建了一个单独的头文件，这样我就可以通过 php 包含函数 将其包含在每个页面中来重复使用它> 但在 header page 中，当我编写简单导航栏的代码时，它显示在列表项中而不是内联。

(This question is not exactly same with any other question as marked duplicate by someone, I have gone through different questions to find my issue but I didn't find any so I asked this question by myself)

这是我的代码:

index.php(主索引页)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
</head>
<body>
   <?php include 'header.php'; ?>
   
   <div>
       
   </div>
   
   <?php include 'footer.php'; ?>
   
   <script src="js/jquery-3.3.1.min.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
   <script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
</body>
</html>

header.php(我在其中创建引导导航栏的页眉)

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.php">O.S.P</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="index.php">Home</a></li>
            <li><a href="services.php">Services</a></li>
            <li><a href="about-us.php">About Us</a></li>
            <li><a href="sign-in.php">Sign In</a></li>
            <li><a href="sign-up.php">Sign Up</a></li>
        </ul>
    </div>
</nav>

这是 index.css(辅助 CSS 文件)