如何使用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

这是您可能应该使用表格的情况之一。屏幕阅读器的用户会很感激，Bootstrap内置的样式应该会有所帮助。

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