javascript - 異なるボタンサイズ - Bootstrap

Question

ブートストラップ 2 でボタン グループ (テキスト ボタンとアイコン ボタンが隣り合っている) を作成しようとしています。

<div class="btn-group chips">
  <button type="button"class="btn btn-large btn-success userChips">asdasd</button>
  <button type="button" class="btn btn-large btn-danger removeUser">
       <i class="icon-minus-sign"></i>
  </button>
</div>

左のボタン (アイコンの付いたボタン) のサイズは、テキストの付いたボタン (右のボタン) よりも小さくなっています。

これを修正するにはどうすればよいですか?

Answer 1

固定幅を適用する

.btn {
    width: 80px;
}

固定を適用すると期待が得られますが、コストがかかります。ボタンが後れを取り始める前に、非常に多くの文字しかボタンに含めることができなくなりました。

.fixed .btn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: no-wrap;
}

ここにチェックアウトするためのフィドルがあります。

Answer 2

ボタンの幅を正確に同じにします。

.btn-large {width: 80px;}