Klasse for tekstjustering inden for en tabel

Er der et sæt klasser i Twitter's Bootstrap-ramme, der justerer tekst?

Jeg har f.eks. nogle tabeller med $-totaler, som jeg vil have justeret til højre...

<th class="align-right">Total</th>

og

<td class="align-right">$1,000,000.00</td>

Nej, Bootstrap har ikke en klasse til det, men denne type klasse betragtes som en "utility" klasse, svarende til ".pull-right" klassen, som @anton nævnte.

Hvis du kigger på utilities.less vil du se meget få utility-klasser i Bootstrap, grunden er at denne slags klasser generelt er misbilliget, og anbefales at blive brugt til enten: a) prototyping og udvikling - så du hurtigt kan opbygge dine sider, og derefter fjerne pull-right og pull-left klasserne til fordel for at anvende floats på mere semantiske klasser eller på selve elementerne, eller b) når det er klart mere praktisk end en mere semantisk løsning.

I dit tilfælde ser det ud til, at du med dit spørgsmål ser ud til at du ønsker at få visse tekster justeret til højre i din tabel, men ikke hele teksten. Semantisk set ville det være bedre at gøre noget i stil med (jeg'finder lige på et par klasser her, bortset fra standard bootstrap-klassen .table):

  <table class="table price-table">
    <thead>
      <th class="price-label">Total</th>
    </thead>
    <tbody>
      <tr>
        <td class="price-value">$1,000,000.00</td>
      </tr>
    </tbody>
  </table>

Og bare anvende text-align: left eller text-align: right-deklarationerne på klasser price-value og price-label (eller hvilke klasser der nu passer til dig).

Problemet med at anvende align-right som en klasse er, at hvis du ønsker at refaktorisere dine tabeller, skal du lave markup og stilarter om. Hvis du bruger semantiske klasser, kan du måske slippe af sted med kun at refaktorisere CSS-indholdet. Hvis du tager dig tid til at anvende en klasse på et element, er det desuden bedst at forsøge at tildele semantisk værdi til klassen, så det bliver lettere for andre programmører (eller dig selv tre måneder senere) at navigere i markup'en.

En måde at tænke på det på er følgende: Når du stiller spørgsmålet "Hvad er denne td til?", vil du ikke få en afklaring af svaret "align-right".

Kommentarer (4)

Jeg gætter på at fordi CSS allerede har text-align:right, AFAIK, Bootstrap har ikke en særlig klasse til det.

Bootstrap har "pull-right" til at flytte divs osv. til højre.

Bootstrap 2.3 er netop udkommet og har tilføjet tekstjusteringsstile:

Bootstrap 2.3 udgivet (2013-02-07)

Kommentarer (1)

Klassen .text-align er fuldstændig gyldig og mere anvendelig end at have en .price-label og .price-value, som ikke længere er til nogen nytte.

Jeg anbefaler at gå 100% med en brugerdefineret utility-klasse kaldet

.text-right {
  text-align: right;
}

Jeg kan godt lide at lave noget magi, men det er op til dig, ligesom noget:

span.pull-right {
  float: none;
  text-align: right;
}
Kommentarer (4)