ボタングループの幅を100%に設定して、ボタンを等幅にする？

質問

Bootstrapを使用しています。 btn-group の幅が親要素の100%になるように設定したいです。また、内側のボタンも同じ幅になるようにしたいです。今のままではどちらも実現できません。

ここにJSFiddleを作りました。 http://jsfiddle.net/BcQZR/12/

以下がそのHTMLです。

<div class="span8 background">
<div class="btn-group btn-block" id="colours">
<span class="btn"><input type='checkbox' name='size' value='red'/>red</span>
<span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span>
<span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span>
</div> <!-- /btn-group -->
</div>

そして、これが現在の私のCSSですが、これはうまくいきません。

#colours { 
  width: 100%;
}

どのように解決するのですか？

ブートストラップ2 ( ソース )

問題は、ボタンに幅が設定されていないことです。これを試してみてください。

.btn {width:20%;}

EDITです。

デフォルトでは、ボタンはそのテキストの長さの自動幅といくつかのパディングを取るので、あなたの例では、おそらく（パディングを補うために）5つのボタンで14.5％のようなものだと思います。

注意してください。

パディングの補正を行いたくない場合は box-sizing:border-box;

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp