Question

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

在我的主页上，我有一个由Bootstrap 3制作的导航栏。在这个导航栏中，我有一个带有2个按钮的表单。

当我使用EJS时，这些按钮是空格分隔的，就像Bootstrap的导航栏文档中一样：

With spaces between buttons

但是当我切换到Jade时，结果是：

Withous spaces between buttons

我尝试使用Bootstrap的navbar文档中的代码，我遇到了同样的问题：Jade没有空格。（http://getbootstrap.com/components/#navbar）

我的身体包含2个div。使用EJS，我之间有一个空间（我认为这是一些Bootstrap的魔法），没有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>

模板

doctype html
html
  head
    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')
  body
      nav.navbar.navbar-default(role='navigation')
          div.container-fluid
              div.navbar-header
                  button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
                      span.sr-only Activer la navigation
                      span.icon-bar
                      span.icon-bar
                      span.icon-bar
              div#bs-example-navbar-collapse-1.collapse.navbar-collapse
                  form#uploadFileForm.navbar-form.navbar-left(role='send', enctype='multipart/form-data')
                      div.form-group
                          input#textFile.form-control(type='text', placeholder='Envoi de fichier')
                      button.btn.btn-default(type='submit') Envoi
                  p.navbar-text.navbar-right= title

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>

模板

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

的style.css

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

a {
  color: #00B7FF;
}

Answer 1

默认情况下，Jade会从html中删除所有空格。这导致bootstrap将按钮格式化在一起。

以这种方式写按钮：

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

使用jade而不是EJS时的行为不同

1 个答案: