css - ブートストラップでボタンのグリッドを設定するには?

Question

表示したいボタンは約20個あります。（ http://radio.meteor.com/のラジオ局。 ）

Meteor/Handlebar の HTML は次のようになります。

<div id="channels" class="span12">
  <div class="btn-group">
    {{#each channels}}
    <button class="btn {{#if playing}}btn-primary{{/if}}" id="channel-{{name}}">
      {{name}}
    </button>
    {{/each}}
  </div>
</div>

ボタンを縦方向と横方向の両方に配置したい。btn-group でいいと思っていたのですが、ボタンが左端に移動してしまいました。私は無駄にこれを試しました：

#channels button {
  float: left;
  width: 120px;
}

Answer 1

各 li は ul 親の幅の 100% として設定されます。代わりに、チャネル li の css は次のようになります。

#channels li {
   float: left;
   width: auto;
}