Angularjs 使用express渲染jade模板后引导按钮间距丢失

嗨，我正在使用angular和express，并使用jade作为模板引擎。 当我渲染一个部分时，它是一个jade模板，渲染视图看起来与 当我不使用翡翠渲染局部时

例如,；使用jade时，按钮之间的空间会丢失，就像附加的图像一样

这就是我所尝试的

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

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;")

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>

以及在express 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

玉石

---

您的jade模板是正确的，您的问题与Boostrap无关，您只需添加

nbsp的

.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


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


你可能对这个感兴趣

试一试，如果你把空格（或回车）放在流动元素（如按钮）之间，你会看到同样的行为


TestTest

试验
测试
您是否比较了这两种情况下按钮的呈现HTML？这可能会对我有所帮助。是的，我看了，它们（在我看来）是一样的。事实上，我认为问题在于在渲染过程中应用样式，但我再次思考并询问；如果在渲染过程中出现问题，则说明如何渲染按钮。顺便说一句，当我放置时，我将呈现的html和jade版本放在帖子中|我得到了空间，但我认为如果jade和html之间有一对一的转换，那么我应该不需要空格字符，对吗？是的，它与额外的空格字符一起工作。但是在html中，它没有这些显式空间，为什么会有区别呢？如果每次我添加一个组件时开始添加这些空格，就会有一些看起来很奇怪的空格。对不起，我刚刚意识到“不是jade”，我更新了帖子。我还添加了html输出。实际上，使用jade时，所有空格似乎都消失了。我指的是按钮图标和按钮文本之间的空格。我是否遗漏了什么“元素之间找不到任何空格，因此如果您不想在jade中使用nbsp，您应该插入空格，就像您在HTML中已经做的那样，否则jade不知道需要这样做”我将空格放在哪里。那么按钮img和按钮文本之间的空格呢？我也必须在那里加空格。顺便说一句，对不起，我的问题似乎有点愚蠢。这是我第一次写html代码，我可能会在你的评论中遗漏一些要点。
.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;')