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）并看到错误。

只是澄清一下，如果你完美地上传所有内容，它必须看起来与本地看起来完全一样。

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

1 个答案: