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;
}