使用快递渲染玉石模板后，引导button间距丢失

您好，我使用angular度与快递和使用玉作为模板引擎。 当我渲染的部分是一个玉的模板渲染视图看起来不同于当我不使用玉的渲染部分。

这个例子是; 当使用button之间的玉空间就像附加的图像丢失。

在这里，我正在尝试;

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进行呈现时，不仅可以看到button之间的空格，还可以看到button图标和文本中的空格

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没有任何关系，要在button之间留出空间，只需添加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;') 

你的玉石呈现的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> 

你不会在元素中find任何空白区域，所以如果你不想在你的玉石中使用nbsp，你应该像在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;') 

你可能会对这个讨论感兴趣

试一试，如果你把空间（或回车）之间的stream量元素（作为button），你会看到相同的行为

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