Question

为什么我的网站在计算机上看起来与众不同？在我的本地主机上看起来像这样：https://imgur.com/a/5k4GRXl 当我将文件上传到托管网站并检查我的网站时，它看起来像这样：https://imgur.com/a/YQyHWjo 我正在使用HTML5，CSS3和Bootstrap 4，有人知道如何解决它吗？我只将css3用于轮播的大小，在navbar和HR标签上进行填充，首先我认为主机无法识别css文件，但是为什么我的ABOUT ME按钮不在正确的位置，我只对按钮使用了引导类，对不起，我的英语不好，希望您回答我的问题。附注：在手机或平板电脑上看起来非常不错，但在PC上看起来像图片中的

Answer 1

您没有提供任何代码段，因此我们唯一可以得到的提示是屏幕截图中的Beginner Web Developer。

我的猜测是您的CSS包含基于%的定位。如果您有两个尺寸不同的屏幕，则%的解析方式将不同。

Answer 2

很难看到没有实际的代码，但是您应该检查文件夹/目录结构并确保它们匹配。有时，如果您上传文件，则路径可能不匹配并导致变形。

建议重新使用Chrome重新打开您的网站，然后打开Chrome Developer。然后在控制台中，查看是否由于Chrome无法找到某些文件而遇到任何错误。

编辑

在HTML的头部部分中，尝试添加以下行：

<base href="/">

在链接CSS文件之前。因此，您的index.html头部分将如下所示：

<head>
    <title>Tudor Alexandru</title>
    <meta charset="UTF-8">
    <base href="/">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="shortcut icon" type="image/png" href="./favicon.png">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

为什么我的网站在计算机上看起来与众不同？

2 个答案: