Bootstrap 3

v3 Alinierea Textului Docs

<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 Alinierea Textului Docs

<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>

Folosind Bootstrap 3.x folosind text-nu functioneaza perfect:

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

Nu, Bootstrap nu't au o clasă pentru asta, dar acest tip de clasă este considerat un "utilitate" clasă, similar cu ".trage de-a dreptul" clasă care @anton menționat.

Dacă te uiți la utilități.mai puțin veți vedea foarte puține clase de utilitate în Bootstrap, motivul fiind că acest tip de clasă este, în general, se încruntă la, și este recomandat pentru a fi folosit fie pentru: a) realizarea de prototipuri și de dezvoltare - astfel încât să puteți construi rapid paginile, apoi scoateți trage de-a dreapta și trage de-a stânga clase în favoarea aplicării plutește la mai semantice sau clase de elemente în sine, sau b) când s's clar mai practic decât o mai semantice soluție.

În cazul tău, de întrebarea dumneavoastră se pare că doresc să aibă anumite aliniere text la dreapta în tabel, dar nu pe toate. Semantic, ar fi mai bine sa faci ceva de genul (am'm doar de gând să fac câteva cursuri de aici, cu excepția default bootstrap clasa, .tabelul):

  <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>

Și se aplică doar text-align: left " sau " text-align: right declarații la preț-valoare și preț-clase (sau orice clase de lucru pentru tine).

Problema cu aplicarea `align-nu ca o clasă, este că, dacă doriți să refactor tabele va trebui să refaceți marcare și stiluri. Dacă utilizați semantic clase s-ar putea fi capabil de a obține departe cu refactoring numai CSS conținut. În Plus, dacă luați timp pentru a aplica o clasă de la un element, l's cele mai bune practici pentru a încerca să atribui o valoare semantică de la această clasă, astfel încât marcajul este mai ușor pentru a naviga pentru alți programatori (sau trei luni mai târziu).

Un mod de a gândi este aceasta: atunci când pune intrebarea "Ce este acest td pentru?", nu va primi clarificări din partea răspuns "aliniați-dreapta".

Bootstrap 2.3 are clase de utilitate text-stânga", "text-dreapta", și " text-center, dar ele nu funcționează în celulele tabelului. Până Bootstrap 3.0 este eliberat (în cazul în care au rezolvat problema) si sunt capabil de a face trecerea, am adăugat la site-ul meu CSS, care este încărcată după bootstrap.css:

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

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

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

Trebuie doar să adăugați un "personalizate" de stil, care este încărcată după Bootstrap´s stylesheet. Deci, clasa definiții sunt supraîncărcate.

În acest stil declara alinierea după cum urmează:

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

Acum sunteți capabili de a utiliza "comun" alinierea la convențiile de td și th elemente.

Cred că CSS are deja text-align:right, AFAIK, Bootstrap nu't au un clasa speciala pentru ea.

Bootstrap are "trage de-a dreptul" pentru plutitoare divs, etc. la dreapta.

Bootstrap 2.3 venit și-a adăugat alinierea textului stiluri:

Bootstrap 2.3 lansat (2013-02-07)

Bootstrap 4 vine! Utilitatea claselor a făcut cunoscut în Bootstrap 3.x sunt acum în punctul în care a activat. Implicit puncte de întrerupere sunt: xs, sm, md, lg și xl, astfel încât aceste alinierea textului clase arate ceva de genu .text-[întrerupere]-[alignnment].

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

Important: Ca de scris acest lucru, Bootstrap 4 este numai într-Alpha 2. Aceste clase și modul în care acestea're folosite sunt supuse de a modifica fără preaviz.

Bootstrap alinierea textului în v3.3.5:

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

CodePen exemplu

Următoarele linii de cod sunt de lucru în mod corespunzător. Puteți atribui clase, cum ar fi text-center, la stânga sau la dreapta, textul se va alinia în mod corespunzător.

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

Aici nu e't orice este nevoie pentru a crea orice clasă extern. Acestea sunt Bootstrap clase și au propriile lor proprietăți.

Puteți utiliza această CSS de mai jos:

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

A .text-align clasa este total valabil și mai ușor de utilizat decât cu o.pret eticheta "și".preț-valoare, care sunt de nici un folos nici mai mult.

Vă recomandăm merge 100% cu un obicei de utilitate clasa numita

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

Îmi place să fac ceva magic, dar care este de până la tine, ca și cum ceva:

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

Ow, cu eliberarea de Bootstrap 3, puteți utiliza clase de text-center pentru aliniere centru, text-stânga pentru aliniere stânga, text-dreapta pentru aliniere dreapta și text-justify pentru o aliniere justificată.

Bootstrap este un foarte simplu cadru frontend pentru a lucra cu, odată ce ați utiliza-o. Precum și ca fiind foarte ușor de a personaliza pentru a se potrivi gustul tau.

Aici este o scurtă și dulce răspunde cu un exemplu.

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>


  <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>

Extinderea pe David's a răspunde, am adăuga doar un simplu curs pentru a spori Bootstrap astfel:

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

Avem cinci clase pentru asta, pe care o puteți consulta aici: 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>

Aici este cea mai simplă soluție

puteți atribui clase, cum ar fi text-center, la stânga sau la dreapta. Textul se va alinia în mod corespunzător pentru aceste clase. Nu trebuie sa faci cursuri separat. Aceste clase sunt încorporate în BootStrap 3

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

Verifica aici: Demo

În versiunea Bootstrap 4. Există unele incorporat clase în poziția de text.

Pentru centrarea tabelul antet și date text:

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

De asemenea, puteți utiliza această clase pentru a poziționa orice text.

<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>

Pentru mai multe detalii

Sper's te ajut.

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

text aliniat Stânga pe ferestre de dimensiuni MD (mediu) sau mai larg.

text aliniat Stânga pe ferestre de dimensiuni LG (mare) sau mai larg.

text aliniat Stânga pe ferestre de dimensiuni XL (extra-large) sau mai larg.

În clasa Bootstrap invalid class

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

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

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