3

純粋なブートストラップを使用すると、ボタン間に小さな水平スペースがあります。

<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で再現する方法は?

4

2 に答える 2

3

HTML の行末またはスペースが、ボタン間の小さな水平スペースを引き起こしているようです。同様の質問については、これを参照してください。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);
于 2015-07-23T01:53:14.167 に答える
2

皮肉なことに、HTML テンプレートを作成する際によく遭遇する大きな問題の 1 つは、空白を削除しようとすることでした。ミスリルでは、空白はありません。ギャップが予想される場所でテンプレートを作成するのに役立つこの小さな関数を作成しました。

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);
于 2015-07-23T11:05:17.880 に答える