Fatal编程技术网
  • javascript/
  • Javascript 使用jade代替EJS时的不同行为

Javascript 使用jade代替EJS时的不同行为

javascript css node.js twitter-bootstrap-3

Javascript 使用jade代替EJS时的不同行为,javascript,css,node.js,twitter-bootstrap-3,pug,Javascript,Css,Node.js,Twitter Bootstrap 3,Pug,在我的node.js应用程序中，我一直使用EJS作为模板引擎。但由于一些限制，我决定改用Jade 在我的主页中，我有一个由Bootstrap3生成的导航栏。在这个导航栏中，我有一个带有两个按钮的表单 当我使用EJS时，这些按钮是空格分隔的，与Bootstrap的navbar文档中的完全相同： 但当我转向Jade时，结果是： 我尝试使用Bootstrap的navbar文档中的代码，但遇到了相同的问题：Jade没有空格。（） 我的身体有两个div。有了EJS，我在它们之间有一个空间（我想这是一些

在我的node.js应用程序中，我一直使用EJS作为模板引擎。但由于一些限制，我决定改用Jade

在我的主页中，我有一个由Bootstrap3生成的导航栏。在这个导航栏中，我有一个带有两个按钮的表单

当我使用EJS时，这些按钮是空格分隔的，与Bootstrap的navbar文档中的完全相同：

但当我转向Jade时，结果是：

我尝试使用Bootstrap的navbar文档中的代码，但遇到了相同的问题：Jade没有空格。（）

我的身体有两个div。有了EJS，我在它们之间有一个空间（我想这是一些引导的魔法），没有一个是Jade

我检查了我所有的文件两次。它们包含完全相同的CSS和相同的标记

我正在努力解决这个问题。你能帮我吗

提前谢谢

编辑：这是代码，我从bootstrap的文档中获取了一个非常基本的示例

翡翠

<!DOCTYPE html><html><head><title>Express</title><link rel="stylesheet" href="/stylesheets/style.css"><link rel="stylesheet" href="/js/bower_components/bootstrap/dist/css/bootstrap.min.css"><script src="/js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script></head><body><nav role="navigation" class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" class="navbar-toggle collapsed"><span class="sr-only">Activer la navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"><form id="uploadFileForm" role="send" enctype="multipart/form-data" class="navbar-form navbar-left"><div class="form-group"><input id="textFile" type="text" placeholder="Envoi de fichier" class="form-control"></div><button type="submit" class="btn btn-default">Envoi</button></form><p class="navbar-text navbar-right">Express</p></div></div></nav></body></html>
EJS

<!DOCTYPE html>
<html>
<head>
    <title>Express</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='/js/bower_components/bootstrap/dist/css/bootstrap.min.css' />
    <script src="/js/bower_components/bootstrap/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Activer la navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left" role="send" enctype="multipart/form-data"  id="uploadFileForm">
                <div class="form-group">
                    <input type="text" id="textFile" class="form-control" placeholder="Envoi de fichier">
                </div>
                <button type="submit" class="btn btn-default">Envoi</button>
            </form>
            <p class="navbar-text navbar-right">Express</p>
        </div>
    </div>
</nav>
</body>
</html>
默认情况下，Jade从html中删除所有空格。这导致boostrap将按钮格式化在一起

这样写按钮：

button.btn.btn-primary Button 1
=  ' '
button.btn.btn-primary Button 2
=  ' '
button.btn.btn-primary Button 3
你应该提供你的输入（EJS和Jade）和生成的HTML，而不是图像。你是对的，对不起。我刚刚添加了代码。谢谢你的回答。我忘了提到页面是用Node.jsI呈现的。我刚刚注意到Jade生成的HTML没有格式化。如果我格式化它，显示与EJS相同！怎么会？无格式：有格式：首先，只发布相关的代码片段而不是完整的模板就足够了。我没有看到任何
选项，只有一个按钮，因此我无法将您的问题映射到代码，因为您的屏幕截图显示的不是这个。要获得更好的格式，可以将其粘贴到此处：

<!DOCTYPE html>
<html>
    <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
        <link rel='stylesheet' href='/js/bower_components/bootstrap/dist/css/bootstrap.min.css' />
        <script src="/js/bower_components/bootstrap/dist/js/bootstrap.min.js" ></script>
    </head>
    <body>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Activer la navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <form class="navbar-form navbar-left" role="send" enctype="multipart/form-data"  id="uploadFileForm">
                        <div class="form-group">
                            <input type="text" id="textFile" class="form-control" placeholder="Envoi de fichier">
                        </div>
                        <button type="submit" class="btn btn-default">Envoi</button>
                    </form>
                    <p class="navbar-text navbar-right"><%= title %></p>
                </div>
            </div>
        </nav>
  </body>
</html>



body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}



button.btn.btn-primary Button 1
=  ' '
button.btn.btn-primary Button 2
=  ' '
button.btn.btn-primary Button 3