Wie erstellt man einen Grid-Header mit Twitter Bootstrap?

Question

Wie kann ein Bootstrap Grid mit einem einfachen Header wie das Bild unten gestylt werden?

Wenn ich versuche, die Hintergrundfarbe der ersten Zeile zu ändern, wird die Farbe aufgrund der Rasterauffüllung nicht bis zum Rand des Rasters erweitert. Wenn ich den linken/rechten Rasterabstand entferne, vermasselt er die abgerundeten Ecken.

Die html sieht wie folgt aus:

<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

hilft das? 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

Dies ist einer dieser Fälle, in denen Sie wahrscheinlich eine Tabelle verwenden sollten. Screenreader-Benutzer werden es zu schätzen wissen, und Bootstrap hat eingebaute Stile, die helfen sollten.

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