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

这有帮助吗？带有背景颜色的 div 上的圆角。

<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