Esiste un insieme di classi nel framework Bootstrap di Twitter che allinea il testo?

Ad esempio, ho alcune tabelle con i $totali che voglio allineati a destra ...

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

e

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

Bootstrap 3

v3 Documenti di allineamento del testo

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Bootstrap 4

v4 Documenti di allineamento del testo

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

L'uso di Bootstrap 3.x usando text-rightfunziona perfettamente:

<td class="text-right">
  text aligned
</td>

No, Bootstrap non ha una classe per questo, ma questo tipo di classe è considerata una classe "utility", simile alla classe ".pull-right" menzionata da @anton.

Se guardi utilities.less vedrai pochissime classi di utilità in Bootstrap, il motivo è che questo tipo di classe è generalmente disapprovato, e si consiglia di usarlo per entrambi: a) prototipazione e sviluppo - in modo da poter creare rapidamente dalle tue pagine, quindi rimuovi le classi pull-right e pull-left a favore dell'applicazione di float a più classi semantiche o agli elementi stessi, oppure b) quando è chiaramente più pratico di una soluzione più semantica.

Nel tuo caso, con la tua domanda sembra che tu voglia avere un certo testo allineato a destra nella tua tabella, ma non tutto. Semanticamente, sarebbe meglio fare qualcosa del genere (tratterò solo alcune classi qui, ad eccezione della classe bootstrap predefinita, .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>

E basta applicare il text-align: leftotext-align: right dichiarazioni alle classi prezzo-valore e prezzo-etichetta (o qualunque classe funzioni per te).

Il problema con l'applicazione align-rightcome classe è che se vuoi riformattare le tue tabelle dovrai rifare il markup e gli stili. Se usi le classi semantiche potresti essere in grado di cavartela solo con il refactoring del contenuto CSS. Inoltre, se stai impiegando del tempo per applicare una classe a un elemento, è consigliabile provare ad assegnare un valore semantico a quella classe in modo che il markup sia più facile da navigare per altri programmatori (o tu tre mesi dopo).

Un modo di pensarci è questo: quando poni la domanda "A cosa serve questo td?", Non otterrai chiarimenti dalla risposta "align-right".

Bootstrap 2.3 ha classi di utilità text-left, text-righte text-center, ma non funzionano nelle celle della tabella. Fino al rilascio di Bootstrap 3.0 (dove hanno risolto il problema) e non sono in grado di effettuare il passaggio, l'ho aggiunto al CSS del mio sito che viene caricato dopo bootstrap.css:

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

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

Aggiungi semplicemente un foglio di stile "personalizzato" che viene caricato dopo il foglio di stile di Bootstrap. Quindi le definizioni di classe sono sovraccaricate.

In questo foglio di stile dichiarare l'allineamento come segue:

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

Ora puoi utilizzare le convenzioni di allineamento "comuni" per gli elementi td e th.

Immagino perché CSS ha già text-align:right , AFAIK, Bootstrap non ha una classe speciale per questo.

Bootstrap ha "pull-right" per i div fluttuanti, ecc. A destra.

Bootstrap 2.3 è appena uscito e ha aggiunto gli stili di allineamento del testo:

Rilascio di Bootstrap 2.3 (2013-02-07)

Bootstrap 4 sta arrivando ! Le classi di utilità rese familiari in Bootstrap 3.xsono ora abilitate al punto di interruzione. I punti di interruzione di default sono: xs, sm, md, lge xl, quindi queste classi di allineamento del testo sembrano qualcosa di simile .text-[breakpoint]-[alignnment].

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

Importante: al momento della stesura di questo, Bootstrap 4 è solo in Alpha 2. Queste classi e il modo in cui vengono utilizzate sono soggette a modifiche senza preavviso.

Allineamento del testo Bootstrap in v3.3.5:

 <p class="text-left">Left</p>
 <p class="text-center">Center</p>
 <p class="text-right">Right</p>

Esempio di CodePen

Le seguenti righe di codice funzionano correttamente. Puoi assegnare classi come centro testo, sinistra o destra, il testo si allineerà di conseguenza.

<p class="text-center">Day 1</p> 
<p class="text-left">Day 2</p> 
<p class="text-right">Day 3</p>

Qui non è necessario creare alcuna classe esterna. Queste sono le classi Bootstrap e hanno una propria proprietà.

Puoi usare questo CSS qui sotto:

.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */

La .text-alignclasse è totalmente valida e più utilizzabile che avere un .price-labele.price-value che non servono più.

Consiglio di andare al 100% con una classe di utilità personalizzata chiamata

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

Mi piace fare un po 'di magia, ma dipende da te, come qualcosa:

span.pull-right {
  float: none;
  text-align: right;
}

Ecco una breve e dolce risposta con un esempio.

table{
    width: 100%;
}
table td, table th {
    border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <table>
    <tr>
      <th class="text-left">Text align left.</th>
      <th class="text-center">Text align center.</th>
      <th class="text-right">Text align right.</th>
    </tr>
    <tr>
      <td class="text-left">Text align left.</td>
      <td class="text-center">Text align center.</td>
      <td class="text-right">Text align right.</td>
    </tr>
  </table>
</body>

Espandendo la risposta di David , ho appena aggiunto una semplice classe per aumentare Bootstrap in questo modo:

.money, .number {
    text-align: right !important;
}

In alternativa, con il rilascio di Bootstrap 3, è possibile utilizzare le classi di text-centerper allineamento centrale, text-left per allineamento a sinistra, text-rightper allineamento a destra e text-justifyper un allineamento giustificato.

Bootstrap è un framework frontend molto semplice con cui lavorare, una volta utilizzato. Oltre ad essere molto facile da personalizzare per adattarlo ai tuoi gusti.

Abbiamo cinque classi per questo, a cui puoi fare riferimento da qui: http://v4-alpha.getbootstrap.com/components/utilities/

<div class="text-left">Left aligned text.</div>
<div class="text-center">Center aligned text.</div>
<div class="text-right">Right aligned text.</div>
<div class="text-justify">Justified text.</div>
<div class="text-nowrap">No wrap text.</div>

Ecco la soluzione più semplice

È possibile assegnare le classi come text-center, sinistra o destra. Il testo si allineerà di conseguenza a queste classi. Non è necessario creare lezioni separatamente. Queste classi sono integrate in BootStrap 3

    <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

Controlla qui: Demo

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

In Bootstrap versione 4. Esistono alcune classi integrate per posizionare il testo.

Per centrare l'intestazione della tabella e il testo dei dati:

 <table>
    <tr>
      <th class="text-center">Text align center.</th>
    </tr>
    <tr>
      <td class="text-center">Text align center.</td>
    </tr>
  </table>

Puoi anche usare queste classi per posizionare qualsiasi testo.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider</p>

Per ulteriori dettagli

Spero ti sia d'aiuto.

In questa classe non valida di Bootstrap a tre classi

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

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

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

Usa text-align:center !important. Potrebbero esserci altre text-alignregole CSS quindi !importantè importante.

table,
th,
td {
  color: black !important;
  border-collapse: collapse;
  background-color: yellow !important;
  border: 1px solid black;
  padding: 10px;
  text-align: center !important;
}

<table>
  <tr>
    <th>
      Center aligned text
    </th>
  </tr>
  <tr>
    <td>Center aligned text</td>
    <td>Center aligned text</td>
  </tr>
</table>