Twitter Bootstrapを使用してグリッドヘッダーを作成するには？

Question

ブートストラップグリッドは、下の図のようなシンプルなヘッダーでどのようにスタイリングできますか？

最初の行の背景色を変更しようとすると、グリッドのパディングのためにグリッドの端まで色が伸びません。私は、左/右のグリッドのパディングを削除すると、丸い角が崩れます。

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

<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px"> 
<div class="row-fluid"> 
    <div class="span3">Name</div> 
    <div class="span3">Count</div> 
</div> 
<div class="row-fluid"> 
    <div class="span3">Joe</div> 
    <div class="span3">10</div> 
</div> 
<div class="row-fluid"> 
    <div class="span3">Bob</div> 
    <div class="span3">7</div> 
</div> 
</div> 

Answer 1

は、このヘルプをしていますか？ rounded corners on divs with background color。

<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px; padding: 0px"> 
    <div class="row-fluid" style="background-color: #f0f0f0; border-top-left-radius: 10px; border-top-right-radius: 10px;"> 
     <div class="span3">Name</div> 
     <div class="span3">Count</div> 
    </div> 
    <div class="row-fluid"> 
     <div class="span3">Joe</div> 
     <div class="span3">10</div> 
    </div> 
    <div class="row-fluid"> 
     <div class="span3">Bob</div> 
     <div class="span3">7</div> 
    </div> 
</div> 

Answer 2

これはおそらくテーブルを使用する必要があるケースの1つです。スクリーンリーダーのユーザーはそれに感謝し、Bootstrapには役立つスタイルが組み込まれています。

http://twitter.github.com/bootstrap/base-css.html#tables