css - 如何在 Bootstrap 中设置按钮网格？

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%， channel li 的 css 应该是:

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