bootstrap 按钮之间的水平 space 使用 mithril.js

Question

当使用纯 bootstrap 时，按钮之间有一个小的水平 space。

<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 创建元素，则此 space 消失：

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

什么原因导致 bootstrap 在按钮之间添加小 space？如何在 mithril.js 中重现？

Answer 1

HTML 中的行尾或 space 似乎导致按钮之间的小水平 space。有关类似问题，请参阅。为了解决 mithril.js 中的问题，我刚刚在按钮之间添加了 space：

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 模板时经常遇到的一大难题是试图消除空格。对于 Mithril，没有空格。我写了这个小函数来帮助我在我期望的空白处编写模板：

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

bootstrap 按钮之间的水平 space 使用 mithril.js

Horizontal space between bootstrap buttons using mithril.js

twitter-bootstrap

mithril.js