Czy w strukturze Bootstrap na Twitterze jest zestaw klas, który wyrównuje tekst?

Na przykład mam kilka tabel z $sumami, które chcę wyrównać do prawej ...

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

i

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

Bootstrap 3

Dokumenty wyrównania tekstu v3

<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

Dokumenty wyrównania tekstu v4

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

Używanie Bootstrap 3.x text-rightdziała idealnie:

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

Nie, Bootstrap nie ma do tego klasy, ale ten rodzaj klasy jest uważany za klasę „użyteczną”, podobną do klasy „.pull-right” wspomnianej przez @anton.

Jeśli spojrzysz na narzędzia. Jeśli nie zobaczysz bardzo niewielu klas narzędzi w Bootstrap, powód jest taki, że ten rodzaj klasy jest zasadniczo niezadowolony i zaleca się go używać do: a) prototypowania i programowania - abyś mógł szybko zbudować na swoich stronach, a następnie usuń klasy „pull-right” i „pull-left” na rzecz zastosowania liczb zmiennoprzecinkowych do większej liczby klas semantycznych lub do samych elementów, lub b) gdy jest to wyraźnie bardziej praktyczne niż rozwiązanie bardziej semantyczne.

W twoim przypadku po twoim pytaniu wygląda na to, że chcesz wyrównać tekst po prawej stronie w tabeli, ale nie wszystkie. Semantycznie lepiej byłoby zrobić coś takiego (zamierzam tylko stworzyć tutaj kilka klas, z wyjątkiem domyślnej klasy bootstrap, .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>

I po prostu zastosuj text-align: leftlub text-align: rightdeklaracje do klas cen-wartość i klas etykiet cenowych (lub dowolnych klas, które działają dla Ciebie).

Problem z aplikacją align-rightjako klasą polega na tym, że jeśli chcesz przefakturować swoje tabele, będziesz musiał przerobić znaczniki i style. Jeśli używasz klas semantycznych, być może uda Ci się uniknąć refaktoryzacji tylko treści CSS. Ponadto, jeśli poświęcasz czas na zastosowanie klasy do elementu, najlepszą praktyką jest próba przypisania wartości semantycznej do tej klasy, aby ułatwić nawigację znacznikom dla innych programistów (lub ciebie trzy miesiące później).

Jednym ze sposobów, aby o tym pomyśleć jest: kiedy zadajesz pytanie „Po co to jest?”, Nie uzyskasz wyjaśnienia od odpowiedzi „wyrównaj do prawej”.

Bootstrap 2.3 zawiera klasy narzędziowe text-left, text-rightoraz text-center, ale one nie działają w komórkach tabeli. Do czasu wydania Bootstrap 3.0 (gdzie rozwiązali problem) i nie jestem w stanie dokonać zmiany, dodałem to do mojego CSS witryny, który jest ładowany po bootstrap.css:

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

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

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

Wystarczy dodać „niestandardowy” arkusz stylów, który jest ładowany po arkuszu stylów Bootstrap. Definicje klas są więc przeciążone.

W tym arkuszu stylów zadeklaruj wyrównanie w następujący sposób:

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

Teraz możesz używać „wspólnych” konwencji wyrównania dla elementów td i th.

Myślę, że ponieważ CSS już ma text-align:right, AFAIK, Bootstrap nie ma dla niego specjalnej klasy.

Bootstrap ma funkcję „pull-right” dla pływających div, itp. Po prawej stronie.

Właśnie wyszedł Bootstrap 2.3 i dodał style wyrównania tekstu:

Wydano Bootstrap 2.3 (2013-02-07)

Nadchodzi Bootstrap 4 ! Klasy narzędzi, które zostały zaznajomione z Bootstrap, 3.xsą teraz włączone do punktu przerwania. Domyślne wartości graniczne są: xs, sm, md, lgixl tak te zajęcia wyrównanie tekstu wyglądać podobnie .text-[breakpoint]-[alignnment].

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

Ważne: w chwili pisania tego Bootstrap 4 jest tylko w wersji Alpha 2. Te klasy i sposób ich użycia mogą ulec zmianie bez powiadomienia.

Wyrównanie tekstu bootstrap w wersji 3.3.5:

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

Przykład CodePen

Następujące wiersze kodu działają poprawnie. Możesz przypisać klasy takie jak środek tekstu, lewy lub prawy. Tekst zostanie odpowiednio wyrównany.

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

Tutaj nie ma potrzeby tworzenia żadnej klasy zewnętrznej. Są to klasy Bootstrap i mają swoją własność.

Możesz użyć tego CSS poniżej:

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

.text-alignKlasa jest całkowicie poprawny i bardziej użyteczny niż posiadanie .price-labeli.price-value które są bezużyteczne więcej.

Polecam skorzystanie w 100% z niestandardowej klasy narzędzi o nazwie

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

Lubię robić magię, ale to zależy od ciebie, jak coś:

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

Oto krótka i słodka odpowiedź z przykładem.

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>

Rozwijając odpowiedź Davida , po prostu dodałem prostą klasę do rozszerzenia Bootstrap w następujący sposób:

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

Ow, wraz z wydaniem Bootstrap 3, możesz użyć klas text-centerwyrównania do środka, wyrównania text-left do lewej, wyrównania text-rightdo prawej i text-justifywyrównania wyrównanego.

Bootstrap jest bardzo prostą strukturą frontendową do pracy, gdy go wykorzystasz. Poza tym można go bardzo łatwo dostosować do własnych upodobań.

Mamy na to pięć klas, do których możesz się odwołać tutaj: 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>

Oto najprostsze rozwiązanie

Możesz przypisać klasy takie jak centrum tekstu, lewo lub prawo. Tekst zostanie wyrównany zgodnie z tymi klasami. Nie musisz tworzyć zajęć osobno. Klasy te są wbudowane w BootStrap 3

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

Sprawdź tutaj: Demo

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

W wersji Bootstrap 4. Istnieją wbudowane klasy do pozycjonowania tekstu.

W przypadku centrowania nagłówka tabeli i tekstu danych:

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

Możesz także użyć tych klas do pozycjonowania dowolnego tekstu.

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

Po więcej szczegółów

Mam nadzieję, że to ci pomoże.

W tej trzyklasie Bootstrap jest niepoprawna klasa

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

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

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

Zastosowanie text-align:center !important. Mogą istnieć inne text-alignreguły css, więc !importantjest to ważne.

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>