twitter-bootstrap - 使用 mithril.js 的 Bootstrap 按钮之间的水平空间

Question

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

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

是什么导致 Bootstrap 在按钮之间添加小空间？如何在 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);