0
В моем приложении node.js я использую EJS в качестве механизма шаблона. Но из-за некоторых ограничений я решил переключиться на Джейд.Различное поведение при использовании нефрита вместо EJS
На моей домашней странице у меня есть навигатор, созданный Bootstrap 3. Внутри этой навигационной панели у меня есть форма с двумя кнопками.
Когда я EJS эти кнопки были разделенных пробелами, так же, как в NavBar документации Bootstrap по:
Но когда я перешел на Джейд, результат был:
Я попытался с кодом из навигационной документации Bootstrap, и у меня была такая же проблема: никаких пробелов с Jade. (http://getbootstrap.com/components/#navbar)
И мое тело содержит 2 divs. С EJS у меня было пространство между ними (я полагал, что это была магия Bootstrap), ни один с Jade
Я проверил все свои файлы дважды. Они содержат точно такой же CSS, что и разметка.
Я борюсь с этой проблемой. Вы можете мне помочь ?
Заранее спасибо.
EDIT: Вот код, я взял очень простой пример из документации 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;
}
вы должны обеспечить ввод (EJS и Джейд) и сгенерированный HTML, а не изображения. – timaschew
вы правы, извините. Я просто добавил код. Спасибо за ваш ответ. – Harkonnen
Я забыл упомянуть, что страницы отображаются с помощью Node.js – Harkonnen