bootstrap 使用 express 渲染 jade 模板后按钮间距丢失

Question

您好，我正在将 angular 与 express 一起使用，并使用 jade 作为模板引擎。当我渲染一个 jade 模板渲染的部分时，渲染视图看起来不同于当我不使用 jade 渲染局部时。

例子是;当在按钮之间使用玉 space 时，就像附加的图像一样丢失。

这是我正在尝试的；

index.jade

body
    block content
        div(class="container-fluid")
            div(class="row")
                div(class="col-sm-2 col-md-2 col-lg-2")
                    include ../public/app/views/sidebar/main.sidebar.jade

                div(class="col-sm-10 col-md-10 col-lg-10")
                    div(ng-view class="row") ----> i am trying to render view here

editor.html

<div class="col-md-12">   
  <div class="container" style="width:inherit;">
    <div class="panel">
      <div class="panel-heading">
        <button type="button" class="btn btn-success">
          <span class="glyphicon glyphicon-flash"></span>Execute    
        </button>  
        <button type="button" class="btn btn-default">
          <span class="glyphicon glyphicon-floppy-disk text-primary"></span>Save    
        </button>  
      </div>
      <div class="panel-body"> <div id="editor"></div> </div>
    </div>
  </div>
  <div class="container" style="width:inherit;" ng-include src="'/app/partials/editor/result.grid.html'"></div>
</div>

使用 html 渲染时不仅可以看到按钮之间的 spaces，还可以看到按钮图标和文本中的 spaces

editor.jade

div(class="col-md-12" ng-controller="EditorCtrl")   
  div(class="container" style="width:inherit;")
    div.panel
      div(class="panel-heading clearfix")
        button(type="button" class="btn btn-success")
          span(class="glyphicon glyphicon-flash") Execute    
        button(type="button" class="btn btn-default")
          span(class="glyphicon glyphicon-floppy-disk text-primary") 
      div.panel-body
        div(id="editor")
  div(class="container" style="width:inherit;")

并表达 app.js

app.get('/app/views/editor/editor.jade', function(req, res){
    var name = req.params.name;
    res.render('../public/app/views/editor/editor.jade');
});

我也观察到在 jade 中渲染为部分组件的问题

html

翡翠

Answer 1

你的 jade 模板是正确的，你的问题与 Boostrap 无关，要在按钮之间添加 space，你只需添加 nbsp's

.col-md-12(ng-controller='EditorCtrl')
  .container(style='width:inherit;')
    .panel
      .panel-heading.clearfix
        button.btn.btn-success(type='button')
          span.glyphicon.glyphicon-flash Execute


        | &nbsp;

        button.btn.btn-default(type='button')
          span.glyphicon.glyphicon-floppy-disk.text-primary


      .panel-body
        #editor
  .container(style='width:inherit;')

你的jade渲染出来的HTML如下：

<div ng-controller="EditorCtrl" class="col-md-12"><div style="width:inherit;" class="container"><div class="panel"><div class="panel-heading clearfix"><button type="button" class="btn btn-success"><span class="glyphicon glyphicon-flash">Execute</span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-floppy-disk text-primary">Save</span></button></div><div class="panel-body"><div id="editor"></div></div></div></div><div style="width:inherit;" class="container"></div></div>

您将找不到任何白色 space beetween 元素，因此如果您不想在您的玉石中使用 nbsp，您应该插入白色 space，正如您已经在 HTML，否则jade不知道需要做什么

.col-md-12(ng-controller='EditorCtrl')
  .container(style='width:inherit;')
    .panel
      .panel-heading.clearfix
        button.btn.btn-success(type='button')
          span.glyphicon.glyphicon-flash Execute
        | 
        button.btn.btn-default(type='button')
          span.glyphicon.glyphicon-floppy-disk.text-primary Save


      .panel-body
        #editor
  .container(style='width:inherit;')

您可能对此感兴趣 discussion

试试你自己，如果你把 space（或 carriage-return）放在流程元素（如按钮）之间，你会看到相同的行为

<button>Test</button><button>Test</button><br/>
<button>Test</button>
<button>Test</button><br/>

bootstrap 使用 express 渲染 jade 模板后按钮间距丢失

bootstrap button spacing lost after render jade template with express

angularjs

node.js

twitter-bootstrap

express

pug