引導按鈕間距在使用快遞渲染玉石模板後丟失

Question

您好我正在使用angular與express並使用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 

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

和快速的應用程序。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

您玉模板是正確的，而你的問題一無所有做自舉，有beetween你有按鈕空間只是添加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> 

你不會找到任何因此如果你不想在你的玉石中使用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;') 

你可能有興趣在此discussion

自己嘗試，如果你把空格（或回車）beetween流元素（如按鈕），你會看到相同的行爲

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