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

Question

当我比较 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厘米的白色space屏幕。不仅如此，白色背景 divs 变成了非常浅的灰色背景。

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

我没有 partials ejs 文件，除了一个包含消息的文件，而且那个 ejs 文件没有样式信息。每个主页，例如主页、关于页面等，都应该是独立的 css 和 html.

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

Bootstrap（我正在使用 Bootstrap 4）对我来说工作正常。最初打开下拉菜单时出现问题，但我通过下载 Bootstrap 并将 css 文件放入 Public 文件夹而不是使用 cdn link 到 Bootstrap 来解决这个问题], 但无论如何，边距问题甚至在我这样做之前就已经存在了。

Answer 1

BS 有 2 个 classes“container”和“container-fluid”，您需要 class“container-fluid”来强制内容从左边缘扩展到右边缘。下面的代码应该可以解决这个问题。如果一切都好，请告诉我。

<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>

Answer 2

嗨，这听起来很奇怪，所以我只是使用我的 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>

Answer 3

你的代码对我来说工作得很好，确保你已经像这样正确地编写了你的后端代码

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'

的文件夹中

Answer 4

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

一旦我删除了 const expressLayouts = require('express-ejs-layouts') 和 app.use(expressLayouts) 中间件，ejs 文件现在可以正常渲染了。页边距与页面边缘齐平 container-fluid。没有淡灰色背景了。

我还必须提到上面 hang-coder 建议的将样式表按正确顺序放置的解决方案适用于 html 文件。尽管这不是主要问题，但它解决了 html 文件在使用 container-fluid 时无法在浏览器中正确显示边距的问题。我错误地将 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文件的页边距不同，本应为白色的背景为灰色

Margins of the page are different in ejs file and html file, and background is gray when it should be white

html

css

ejs

node.js

bootstrap-4