Горизонтальное пространство между кнопками начальной загрузки с использованием mithril.js

Question

При использовании чистого бутстрапа между кнопками расположено небольшое горизонтальное пространство.

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <button class="btn btn-primary">Save</button> 
      <button class="btn btn-default">Cancel</button> 
     </div> 
    </div> 
</div> 

Это пространство исчезает, если элементы созданы с mithril.js:

var my = {}; 
my.view = function() { 
    return m('.container-fluid', 
    m('.row', 
     m('.col-xs-12', [ 
    m('button.btn.btn-default', 'Save'), 
    m('button.btn.btn-default', 'Cancel') 
     ]) 
    ) 
); 
}; 
m.mount(document.body, my); 

Что вызывает самозагрузки добавить небольшое пространство между кнопками? Как воспроизвести это в mithril.js?

Answer 1

Кажется, что конец строки или пробел в HTML вызывает небольшое горизонтальное пространство между кнопками. См. this для аналогичного вопроса. Чтобы устранить эту проблему в mithril.js я просто добавил пространство между кнопками:

var my = {}; 
my.view = function() { 
    return m('.container-fluid', 
    m('.row', 
     m('.col-xs-12', [ 
    m('button.btn.btn-default', 'Save'), 
    ' ', 
    m('button.btn.btn-default', 'Cancel') 
     ]) 
    ) 
); 
}; 
m.mount(document.body, my); 

Answer 2

Как ни странно, один из самых больших болей я регулярно приходится сталкиваться при написании шаблонов HTML пытался устранить пробелы. С Мифрилом нет пробелов. Я написал эту маленькую функцию, чтобы помочь мне написать шаблоны, где я ожидаю пробелы:

function gaps(){ 
    return Array.prototype.reduce.call(arguments, 
     function intersperse(output, item, index){ 
      return Array.prototype.concat.call(output, ' ', item) 
     } 
    ) 
} 

Так что ваш код будет стать:

var my = {}; 
my.view = function() { 
    return m('.container-fluid', 
    m('.row', 
     m('.col-xs-12', gaps(
     m('button.btn.btn-default', 'Save'), 
     m('button.btn.btn-default', 'Cancel') 
    )) 
    ) 
); 
}; 
m.mount(document.body, my);