Apakah ada seperangkat kelas dalam kerangka Bootstrap Twitter yang menyelaraskan teks?

Misalnya, saya memiliki beberapa tabel dengan $total yang ingin saya selaraskan ke kanan ...

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

dan

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

Bootstrap 3

v3 Dokumen Alignment Teks

<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 Dokumen Alignment Teks

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

Menggunakan Bootstrap 3.x menggunakan text-rightberfungsi dengan sempurna:

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

Tidak, Bootstrap tidak memiliki kelas untuk itu, tetapi kelas semacam ini dianggap sebagai kelas "utilitas", mirip dengan kelas ".pull-right" yang disebutkan @anton.

Jika Anda melihat utilitas. Kecuali Anda akan melihat sangat sedikit kelas utilitas di Bootstrap, alasannya karena kelas semacam ini umumnya disukai, dan direkomendasikan untuk digunakan untuk: a) prototipe dan pengembangan - sehingga Anda dapat dengan cepat membangun keluarkan halaman Anda, lalu hapus kelas tarik-kanan dan tarik-kiri untuk menerapkan mengapung ke kelas yang lebih semantik atau ke elemen itu sendiri, atau b) ketika itu jelas lebih praktis daripada solusi yang lebih semantik.

Dalam kasus Anda, menurut pertanyaan Anda, sepertinya Anda ingin memiliki teks yang lurus di kanan dalam tabel Anda, tetapi tidak semuanya. Semantik, akan lebih baik untuk melakukan sesuatu seperti (Saya hanya akan membuat beberapa kelas di sini, kecuali kelas bootstrap default, .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>

Dan cukup terapkan text-align: leftatau text-align: rightdeklarasi ke kelas harga-nilai dan label-harga (atau kelas apa pun yang cocok untuk Anda).

Masalah dengan menerapkan align-rightsebagai kelas, adalah bahwa jika Anda ingin memperbaiki tabel Anda, Anda harus mengulangi markup dan gaya. Jika Anda menggunakan kelas semantik, Anda mungkin bisa lolos dengan hanya mengembalikan konten CSS. Plus, jika meluangkan waktu untuk menerapkan kelas ke elemen, praktik terbaik untuk mencoba menetapkan nilai semantik ke kelas itu sehingga markup lebih mudah dinavigasi untuk programmer lain (atau Anda tiga bulan kemudian).

Satu cara untuk memikirkannya adalah ini: ketika Anda mengajukan pertanyaan "Untuk apa ini?", Anda tidak akan mendapatkan klarifikasi dari jawaban "luruskan-kanan".

Bootstrap 2.3 memiliki kelas utilitas text-left, text-rightdan text-center, tetapi mereka tidak bekerja dalam sel tabel. Sampai Bootstrap 3.0 dirilis (di mana mereka telah memperbaiki masalah) dan saya dapat beralih, saya telah menambahkan ini ke CSS situs saya yang dimuat setelah bootstrap.css:

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

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

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

Cukup tambahkan stylesheet "khusus" yang dimuat setelah stylesheet Bootstrap. Jadi definisi kelas kelebihan beban.

Dalam stylesheet ini deklarasikan perataan sebagai berikut:

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

Sekarang Anda dapat menggunakan konvensi penyelarasan "umum" untuk elemen td dan th.

Saya kira karena CSS sudah memiliki text-align:right, AFAIK, Bootstrap tidak memiliki kelas khusus untuk itu.

Bootstrap memang memiliki "pull-right" untuk div mengambang, dll ke kanan.

Bootstrap 2.3 baru saja keluar dan menambahkan gaya pelurusan teks:

Bootstrap 2.3 dirilis (2013-02-07)

Bootstrap 4 akan datang ! Kelas utilitas yang dikenali di Bootstrap 3.xsekarang diaktifkan dengan break-point. Breakpoints default: xs, sm, md, lgdan xl, sehingga kelas perataan teks ini terlihat seperti .text-[breakpoint]-[alignnment].

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

Penting: Saat menulis ini, Bootstrap 4 hanya ada di Alpha 2. Kelas-kelas ini dan bagaimana mereka digunakan dapat berubah tanpa pemberitahuan.

Bootstrap perataan teks di v3.3.5:

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

Contoh CodePen

Baris kode berikut berfungsi dengan benar. Anda dapat menetapkan kelas-kelas seperti pusat teks, kiri atau kanan, Teks akan menyelaraskan sesuai.

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

Di sini tidak perlu membuat kelas eksternal. Ini adalah kelas-kelas Bootstrap dan memiliki properti mereka sendiri.

Anda dapat menggunakan CSS ini di bawah:

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

The .text-alignkelas benar-benar valid dan lebih bermanfaat daripada memiliki .price-labeldan .price-valueyang tidak ada gunanya lagi.

Saya sarankan pergi 100% dengan kelas utilitas kustom yang disebut

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

Saya suka melakukan sihir, tetapi itu terserah Anda, seperti sesuatu:

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

Inilah jawaban singkat dan manis dengan sebuah contoh.

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>

Memperluas jawaban David , saya hanya menambahkan kelas sederhana untuk menambah Bootstrap seperti ini:

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

Ow, dengan rilis Bootstrap 3, Anda dapat menggunakan kelas text-centeruntuk perataan tengah, text-left untuk perataan kiri, text-rightuntuk perataan kanan dan text-justifyuntuk perataan yang benar.

Bootstrap adalah kerangka kerja frontend yang sangat sederhana untuk dikerjakan, begitu Anda menggunakannya. Serta sangat mudah untuk menyesuaikan agar sesuai dengan keinginan Anda.

Kami memiliki lima kelas untuk itu, yang dapat Anda rujuk dari sini: 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>

Inilah solusi paling sederhana

Anda dapat menetapkan kelas-kelas seperti pusat teks, kiri atau kanan. Teks akan sesuai dengan kelas-kelas ini. Anda tidak harus membuat kelas secara terpisah. Kelas-kelas ini inbuilt di BootStrap 3

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

Periksa di sini: Demo

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

Dalam Bootstrap versi 4. Ada beberapa kelas bawaan untuk memposisikan teks.

Untuk header tabel keterpusatan dan teks data:

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

Anda juga dapat menggunakan kelas ini untuk memposisikan teks apa pun.

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

Untuk lebih jelasnya

Semoga ini bisa membantu Anda.

Dalam tiga kelas ini Bootstrap kelas tidak valid

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

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

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

Gunakan text-align:center !important. Mungkin ada text-alignaturan css lain sehingga !importantini penting.

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>