上传到服务器时，Bootstrap 3 导航栏无法正确显示

Question

我在 Bootstrap 3 中创建了一个导航栏，当我在本地执行 html 时，它按预期显示如下：

当我尝试将其上传到我的服务器时，它显示如下：

即使在我自己的设备上。包含媒体查询是否有助于解决问题？

<!DOCTYPE html>
<html>
<head> 
    <title>Cryptoskeptic</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://use.fontawesome.com/7468f01c54.js"></script>   
</head>

<body>

<nav class="navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="nav navbar-nav">
            <a href="#" class="navbar-brand"><img src="img/nav-logo.png"></a>
        </div>
        <ul class="nav navbar-nav navbar-right user">
            <li><i class="fa fa-user fa-3x"></i></li>
        </ul>
    </div>
</nav>

body{
    background-color: black;}

.navbar-inverse{
    background:transparent;
    }

.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;}

.user{
position: absolute;
right: 275px;
color: white;
transform: translateY(50%);}

这是正在使用的图像： Navbar-logo

以下是我遇到的一些控制台错误：

Answer 1

据我们所知，您的 CSS 文件似乎没有加载，因为您在 li 元素上获得了一些默认样式。

您应该检查css/bootstrap.css 的路径实际上是否正确加载。如果不是，您应该检查控制台 (here's how to open it on Chrome)，您应该会看到一个错误。

澄清一下，如果您上传的所有内容都完美无缺，那么它的外观必须与本地外观完全相同。