CodeLab技術ブログ

プログラミング技術まとめ

[BootStrap3]ボタンどうしの隙間

Bootstrap3を使ってボタンを表示させたのだが、htmlで直接書いた場合とテンプレートエンジンから出力した場合でなぜか表示が異なる。
HTMLで直接記述するとボタン間の隙間が空くが、テンプレートエンジンで書いた場合は隙間が無くつながってしまった。

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<?php
echo $this->Html->link(_('ログイン'),array('controller'=>'users','action'=>'login'), array('class' => 'btn btn-primary', 'role' => 'button') );
echo $this->Html->link(_('ログアウト'),array('controller'=>'users','action'=>'logout'), array('class' => 'btn btn-primary', 'role' => 'button') );
?>

いろいろ試してみたのだが、どうも、ボタンとボタンのタグの間に、改行コードやスペースがあると間が自動的にあきました。
HTML表記でも

<button type="button" class="btn btn-default">Default</button><button type="button" class="btn btn-primary">Primary</button>

こんな感じでタグとタグの間に何も書かないとつながるようです。
なんかちょっと気持ち悪い感じです。

ちなみに、ボタンどうしをつなげるにはbtn-groupクラスのDVIでくくってあげればよく、ボタングループ同士はpaddingをとってくれるようです。
なので、1個しかないボタンでも一応btn-groupでくくってあげたほうがいいかもしれません。

<div class="btn-group">< ?php
echo $this->Html->link(_('ログイン'),array('controller'=>'users','action'=>'login'), array('class' => 'btn btn-primary', 'role' => 'button') );?></div>
<div class="btn-group">< ?php
echo $this->Html->link(_('ログアウト'),array('controller'=>'users','action'=>'logout'), array('class' => 'btn btn-primary', 'role' => 'button') );?></div>

コメントは受け付けていません。