ejs文件和html文件页边距不同，本该为白色的背景为灰色

如何解决ejs文件和html文件页边距不同，本该为白色的背景为灰色

当我比较 html 文件（在浏览器中）和 ejs 文件时，页面的边距是不同的。我正在使用 node/express 和 Bootstrap 4。我最初用 html 构建页面。我希望内容从侧边到侧边填充页面，并且我能够使用 html 页面来做到这一点。

html,body {
  height: 100%;
  width: 100%;
}
{
    margin:0;
}
body {
    overflow-x: hidden;
}

<div> 
  <div class="row"> 
     <div class="col-lg-12 pl-5 pr-5 pb-5 pt-5 text-light" style="font-size:30px; background-color: pink;">
         My Website
     </div>
  </div> 
</div>

这将产生一个 div，它是从屏幕的一个边缘到另一边缘的粉红色带。

但是，当我将相同的html页面更改为ejs文件时，div和屏幕边缘之间大约有1.3厘米的空白。不仅如此，白色的div背景变成了非常淡的灰色背景。

我没有添加任何其他 css 样式来使背景颜色更改为这种浅灰色。而这种浅灰色背景只出现在 ejs 文件中，而不出现在 html 文件中。

我没有除包含消息的部分 ejs 文件之外的部分 ejs 文件，并且该 ejs 文件没有样式信息。每个主页，例如首页、关于页面等，都应该是自包含的 css 和 html。

我不知道灰色背景是从哪里来的。

Bootstrap（我使用的是 Bootstrap 4）对我来说很好用。最初打开下拉菜单时出现问题，但我通过下载 Bootstrap 并将 css 文件放入公共文件夹而不是使用指向 Bootstrap 的 CDN 链接来解决该问题，但无论如何，在我这样做之前，边距问题就已经存在。

解决方法

BS 有 2 个类“容器”和“容器流体”，您需要类“容器流体”来强制内容将左边缘扩展到右边缘。下面的代码应该可以解决这个问题。如果一切顺利，请告诉我。

<div class="container-fluid"> 
  <div class="row"> 
     <div class="col-lg-12 pl-5 pr-5 pb-5 pt-5 text-light" style="font-size:30px; background-color: pink;">
         My Website
     </div>
  </div> 
</div>

嗨，这听起来很奇怪，所以我只是使用我的 Bootstrap 4 模板进行了双重检查。它工作得很好，粉红色背景从左边缘到右边缘没有空白。下面的完整模板供您参考。我希望它是带有软件安装的 smt。无论如何，您需要确保 Bootstrap、jQuery、popper.js 都正确安装在您的项目中。让我知道。

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->

    <!-- build:css css/main.css -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
    <link rel="stylesheet" href="css/styles.css">
    <!-- endbuild -->

   
</head>

<body>

    <div class="container-fluid"> 
        <div class="row"> 
           <div class="col-lg-12 pl-5 pr-5 pb-5 pt-5 text-light" style="font-size:30px; background-color: pink;">
               My Website
           </div>
        </div> 
      </div> 

   
    
    <!-- jQuery first,then Popper.js,then Bootstrap JS. -->
    <!-- build:js js/main.js -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
    <!-- endbuild -->

    

</body>

</html>

您的代码对我来说很好用，请确保您像这样正确编写了后端代码

const express = require('express');
const ejs = require('ejs');
const app = express();
app.set('view engine','ejs');
app.use(express.static('public'));

app.get('/',(req,res)=>{
    res.render('home',{Title: 'Welcome'});
});

app.listen(3000,()=>{
    console.log('Server is running on port 3000');
});

确保您的 EJS 文件位于名为“views”的文件夹中，并且您的 css 文件位于名为“public”的文件夹中

我发现了问题所在。这是我安装和使用的 express-ejs-layouts 模块。我忘记了我已经这样做了，这就是为什么我没有在问题中提到这一点。我也不认为它会对布局产生太大影响，我认为我必须安装它以及 ejs 模块才能使 ejs 正常工作。老实说，我不知道 express-ejs-layouts 模块做了什么。

删除 const expressLayouts = require('express-ejs-layouts') 和 app.use(expressLayouts) 中间件后，ejs 文件现在可以正常显示。页边距用 container-fluid 与页面边缘齐平。不再有浅灰色背景。

我还必须提到，上面hang-coder 建议的将样式表按正确顺序放置的解决方案适用于html 文件。尽管这不是主要问题，但它解决了使用 container-fluid 时 html 文件无法在浏览器中正确显示边距的问题。我错误地将 Bootstrap 脚本放在 jQuery 脚本之上。我也在 ejs 文件中以错误的顺序放置了这些脚本，这也是为什么页边距显示不正确的问题的一部分，但我在询问 ejs 文件中的页边距问题之前更正了顺序，因为我必须这样做才能使下拉菜单正常工作，这是我在问边距问题之前遇到的另一个问题，但我不确定它们是否对边距问题产生了影响。

所以这个问题与 mac 屏幕或 Chrome 浏览器在 mac 中的显示方式无关，正如我最初认为的那样。

此脚本为我显示了 html 文件中的正确边距：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap 4 Example</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <!-- jQuery library -->
    <script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">. 
    </script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- Latest compiled JavaScript -->
    <script 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">. 
    </script>

  </head>
  <body>
    <div class="container-fluid bg-primary">
      <h1>My First Bootstrap Page</h1>
      <p>This is some text.</p>
    </div>
 </body>
</html>

总而言之，按正确顺序放置 jQuery 和 Bootstrap 脚本并删除 express-ejs-layouts 解决了问题。

ejs文件和html文件页边距不同，本该为白色的背景为灰色

如何解决ejs文件和html文件页边距不同，本该为白色的背景为灰色

解决方法

相关推荐