渲染玉石模板与快递后引导按钮间距丢失

Question

您好我使用角速度表达并使用玉作为模板引擎。 当我渲染部分是玉模板渲染视图看起来不同于 当我在不使用玉的情况下渲染部分时。

这个例子是;当按钮之间使用玉石空间时，会像附加的图像一样丢失。

我们在这里尝试的是什么;

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渲染时 不仅要看按钮之间的空格，还要看按钮图标和文字内的空格

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');
});

我也观察到在玉石中呈现为部分的其他组件中的问题

HTML

玉

Answer 1

您的玉石模板是正确的，您的问题与Boostrap无关，只需添加空格即可添加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


        |  

        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>

你不会在元素之间找到任何空格，所以如果你不想在你的玉中使用，你应该像在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;')

您可能对此discussion

感兴趣

尝试自己，如果你在流量元素（作为按钮）之间放置空格（或回车），你会看到相同的行为

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;