Twitter'ın Bootstrap çerçevesinde metni hizalayan bir dizi sınıf var mı?

Örneğin $, sağa hizalı olmasını istediğim toplamları olan bazı tablolarım var ...

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

ve

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

Önyükleme 3

v3 Metin Hizalama Belgeleri

<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 Metin Hizalama Belgeleri

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

Bootstrap 3.x kullanarak text-rightmükemmel çalışır:

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

Hayır, Bootstrap bunun için bir sınıfa sahip değildir, ancak bu tür bir sınıf @anton'un bahsettiği ".pull-right" sınıfına benzer bir "faydalı" sınıf olarak kabul edilir.

Utilities.less'a bakarsanız, Bootstrap'de çok az yardımcı sınıf göreceksiniz, bunun nedeni bu tür bir sınıfın genellikle kaşlarını çatması ve aşağıdakilerden biri için kullanılması önerilir: a) prototip oluşturma ve geliştirme - böylece hızlı bir şekilde inşa edebilirsiniz daha sonra semantik sınıflara veya elemanların kendilerine şamandıralar uygulamak için çekme-sağ ve çekme-sol sınıflarını kaldırın veya b) daha semantik bir çözümden daha pratik olduğunda.

Sizin durumunuzda, sorunuza göre, belirli bir metnin tablonuzun sağında hizalanmasını istiyorsunuz, ancak hepsinin değil. Anlamsal olarak, böyle bir şey yapmak daha iyi olurdu (varsayılan bootstrap sınıfı, .table hariç, burada sadece birkaç sınıf oluşturacağım):

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

Ve sadece fiyat değeri ve fiyat etiketi sınıflarına (ya da sizin için uygun olan sınıflara) text-align: leftveya text-align: rightbildirimlerini uygulayın .

align-rightSınıf olarak başvuruda sorun , tablolarınızı yeniden düzenlemek istiyorsanız işaretleme ve stilleri yeniden yapmanız gerekecek olmasıdır. Anlamsal sınıflar kullanırsanız, yalnızca CSS içeriğini yeniden düzenlemekten kurtulabilirsiniz. Ayrıca, bir öğeye sınıf uygulamak için zaman ayırıyorsanız, o sınıfa semantik değer atamaya çalışmak en iyi yöntemdir, böylece işaretlemenin diğer programcılar için (veya üç ay sonra) gezinmesi daha kolaydır.

Bunu düşünmenin bir yolu şudur: "Bu ne işe yarar?" Sorusunu ortaya koyduğunuzda, "hizalama-sağ" cevabından açıklama almayacaksınız.

Özyükleme 2.3 programı sınıfları vardır text-left, text-rightve text-centerancak tablo hücrelerinde çalışmaz. Bootstrap 3.0 yayımlanıncaya kadar (burada sorunu çözdüler) ve geçiş yapabiliyorum, daha sonra yüklenen sitem CSS'sine ekledim bootstrap.css:

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

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

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

Bootstrap stil sayfasından sonra yüklenen bir "özel" stil sayfası eklemeniz yeterlidir. Böylece sınıf tanımları aşırı yüklenir.

Bu stil sayfasında hizalamayı aşağıdaki gibi beyan edin:

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

Artık td ve th elemanları için "ortak" hizalama kurallarını kullanabilirsiniz.

Sanırım CSS zaten var text-align:right, AFAIK, Bootstrap bunun için özel bir sınıfa sahip değil.

Bootstrap sağa kayan div'ler vb. İçin "sağa çek" özelliğine sahiptir.

Bootstrap 2.3 çıktı ve metin hizalama stilleri ekledi:

Bootstrap 2.3 yayınlandı (2013-02-07)

Bootstrap 4 geliyor ! Bootstrap'ta tanıdık gelen yardımcı program sınıfları 3.xartık kesme noktası etkindir. Varsayılan kırılma noktaları şunlardır: xs, sm, md, lgve xlbu nedenle bu metin hizalama sınıfları gibi görünmelidir .text-[breakpoint]-[alignnment].

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

Önemli: Bunu yazarken, Bootstrap 4 yalnızca Alpha 2'de. Bu sınıflar ve nasıl kullanıldıkları haber verilmeden değiştirilebilir.

V3.3.5'te önyükleme metni hizalaması:

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

CodePen örneği

Aşağıdaki kod satırları düzgün çalışıyor. Metin merkezi, sol veya sağ gibi sınıflar atayabilirsiniz, Metin buna göre hizalanacaktır.

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

Burada herhangi bir harici sınıf oluşturmaya gerek yoktur. Bunlar Bootstrap sınıflarıdır ve kendi mülkleri vardır.

Bu CSS'yi aşağıda kullanabilirsiniz:

.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-alignSınıf tamamen geçerli ve bir olmasından daha kullanışlı olduğunu .price-labelve .price-valueartık hiçbir faydası olan.

Adlı özel bir yardımcı sınıf ile% 100 gitmenizi öneririz

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

Biraz sihir yapmayı seviyorum, ama bu sana bağlı, bir şey gibi:

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

İşte bir örnekle kısa ve tatlı bir cevap.

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>

Öyleyse, Bootstrap 3'ün serbest bırakılmasıyla, text-centerorta hizalama, text-left sol hizalama, text-rightsağ hizalama ve text-justifyhaklı bir hizalama için sınıflarını kullanabilirsiniz .

Bootstrap, kullandıktan sonra çalışmak için çok basit bir ön uç çerçevesidir. Hem de zevkinize göre özelleştirmek çok kolay olmanın yanı sıra.

David'in cevabını genişleterek, Bootstrap'ı şu şekilde arttırmak için basit bir sınıf ekliyorum:

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

Bunun için başvurabileceğiniz beş dersimiz var: 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>

İşte en basit çözüm

Metin merkezi, sol veya sağ gibi sınıflar atayabilirsiniz. Metin bu sınıflara göre hizalanacaktır. Sınıfları ayrı ayrı yapmak zorunda değilsiniz. Bu sınıflar BootStrap 3'te yerleşiktir

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

Buradan kontrol edin: Demo

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

Bootstrap sürüm 4. Metin yerleştirmek için bazı dahili sınıflar.

Merkezleme tablosu başlığı ve veri metni için:

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

Bu sınıfları herhangi bir metni konumlandırmak için de kullanabilirsiniz.

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

Daha fazla ayrıntı için

Umarım size yardımcı olur.

Bu üç sınıfta Bootstrap geçersiz sınıfı

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

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

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

Kullanın text-align:center !important. Başka text-aligncss kuralları olabilir, bu yüzden !importantönemlidir.

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>