Text-align kelas untuk dalam tabel

Ada satu set kelas di Twitter's Bootstrap framework yang sejalan teks?

Sebagai contoh, saya memiliki beberapa tabel dengan $ total yang saya ingin sejajar ke kanan...

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

dan

<td class="align-right">$1,000,000.00</td>
Rob
Pertanyaan edit 3 November 2019 в 7:09
Pemrograman
html css text-align twitter-bootstrap
10 Oktober 2012 в 10:45
46 tayangan
Mengomentari pertanyaan (1)
Larutan

Bootstrap 3

v3 Perataan Teks 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 Perataan Teks 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>

Komentar (9)

Menggunakan Bootstrap 3.x menggunakan text-benar bekerja sempurna:

<td class="text-right">
  text aligned
</td>
Komentar (1)

Tidak, Bootstrap doesn't memiliki kelas untuk itu, tapi ini semacam kelas dianggap sebagai "utilitas" class, mirip dengan ".tarik-kanan" kelas yang @anton disebutkan.

Jika anda melihat di komputer.kurang anda akan melihat sangat sedikit utilitas kelas di Bootstrap, alasannya adalah bahwa jenis dari kelas ini umumnya disukai, dan dianjurkan untuk digunakan baik untuk: a) prototyping dan pengembangan - sehingga anda dapat dengan cepat membangun halaman anda, kemudian menghapus pull-kanan dan tarik-kiri kelas yang mendukung penerapan mengapung untuk lebih semantik kelas atau unsur-unsur itu sendiri, atau b) ketika itu's jelas lebih praktis daripada yang lebih semantik solusi.

Dalam kasus anda, dengan pertanyaan anda sepertinya anda ingin memiliki teks tertentu sejajar di sebelah kanan di meja anda, tetapi tidak semua dari itu. Secara semantik, akan lebih baik untuk melakukan sesuatu seperti (I'm hanya akan membuat beberapa kelas di sini, kecuali untuk default bootstrap kelas, .tabel): 

  <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 hanya menerapkan text-align: left atau text-align: right deklarasi untuk harga-nilai dan harga-label kelas (atau apapun kelas yang bekerja untuk anda).

Masalah dengan menerapkan menyelaraskan-benar sebagai sebuah kelas, adalah bahwa jika anda ingin refactor tabel anda, anda akan harus mengulang markup dan gaya. Jika anda menggunakan semantik kelas anda mungkin bisa lolos dengan refactoring hanya CSS konten. Plus, jika mengambil waktu untuk menerapkan kelas untuk elemen, it's best practice untuk mencoba untuk menetapkan nilai semantik ke dalam kelas sehingga markup adalah lebih mudah untuk menavigasi untuk programmer lain (atau anda tiga bulan kemudian).

Salah satu cara untuk berpikir tentang hal ini: ketika anda mengajukan pertanyaan "Apa ini td untuk?", anda tidak akan mendapatkan klarifikasi dari jawaban "menyelaraskan kanan".

Komentar (4)

Bootstrap 2.3 memiliki utilitas kelas text-kiri, text-kanan, dan text-pusat, tetapi mereka tidak bekerja dalam sel tabel. Sampai Bootstrap 3.0 dirilis (di mana mereka telah tetap masalah) dan saya mampu membuat saklar, saya telah menambahkan ini ke situs saya CSS yang dimuat setelah bootstrap.css:

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

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

.text-left
{
    text-align: left !important;
}
Komentar (0)

Hanya menambahkan "kustom" stylesheet yang dimuat setelah Bootstrap´s stylesheet. Sehingga definisi class yang kelebihan beban.

Dalam stylesheet ini menyatakan keselarasan sebagai berikut:

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

Sekarang anda dapat menggunakan "biasa" keselarasan konvensi td dan th elemen.

Komentar (0)

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

Bootstrap memiliki "tarik-kanan" untuk mengambang divs, dll. ke kanan.

Bootstrap 2.3 baru saja keluar dan menambahkan teks keselarasan gaya:

Bootstrap 2.3 dirilis (2013-02-07)

Komentar (1)

Bootstrap 4 akan datang! Utilitas kelas dibuat akrab di Bootstrap 3.x yang sekarang break-point diaktifkan. Default breakpoints: xs, sm, md, lg dan xl, jadi ini perataan teks kelas terlihat seperti .teks-[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 dalam Alpha 2. Kelas-kelas ini dan bagaimana mereka're yang digunakan dapat berubah tanpa pemberitahuan.

Komentar (1)

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>

CodePen contoh

Peter Mortensen
Jawaban edit 2 Juli 2019 в 9:15
Komentar (0)

Berikut baris kode yang bekerja dengan baik. Anda dapat menetapkan kelas-kelas seperti teks-tengah, kiri atau kanan, teks akan menyesuaikan sesuai.

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

Di sini ada isn't perlu membuat eksternal kelas. Ini adalah kelas Bootstrap dan memiliki properti mereka sendiri.

Komentar (0)

Anda dapat menggunakan CSS ini di bawah ini:

.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */
Peter Mortensen
Jawaban edit 2 Juli 2019 в 9:15
Komentar (0)

The .text-align kelas yang benar-benar valid dan lebih bermanfaat daripada memiliki .harga-label dan .harga-nilai yang tidak digunakan lagi.

Saya akan merekomendasikan 100% dengan custom utilitas kelas disebut

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

Saya ingin melakukan sihir, tapi itu terserah anda, seperti sesuatu:

span.pull-right {
  float: none;
  text-align: right;
}
Komentar (4)

Ow, dengan rilis dari Bootstrap 3, anda dapat menggunakan kelas text-center untuk perataan tengah, text-kiri untuk perataan kiri, text-kanan untuk perataan kanan dan text-justify untuk keselarasan dibenarkan.

Bootstrap adalah sangat sederhana frontend rangka untuk bekerja dengan, setelah anda menggunakannya. Serta menjadi sangat mudah untuk menyesuaikan sesuai dengan keinginan anda.

Komentar (0)

Berikut ini pendek dan manis yang menjawab 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>


  <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>
Peter Mortensen
Jawaban edit 2 Juli 2019 в 9:21
Komentar (1)

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

.money, .number {
    text-align: right !important;
}
Peter Mortensen
Jawaban edit 2 Juli 2019 в 9:20
Komentar (0)

Kami memiliki lima kelas untuk itu, yang anda bisa lihat 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>
Komentar (0)

Berikut ini adalah solusi sederhana

Anda dapat menetapkan kelas-kelas seperti teks-tengah, kiri atau kanan. Teks akan menyesuaikan sesuai dengan kelas ini. Anda tidak harus membuat kelas-kelas secara terpisah. Kelas-kelas ini adalah built-in di BootStrap 3

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

Cek di sini: Demo

Komentar (0)

Di Bootstrap versi 4. Ada beberapa built-in kelas untuk posisi teks.

Untuk centering tabel header dan data teks:

 <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 posisi teks.

<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 rincian lebih lanjut

Harapan itu's membantu anda.

Majedur Rahaman
Jawaban edit 3 November 2019 в 7:44
Komentar (0)
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

rata Kiri teks pada viewports berukuran MD (medium) atau yang lebih luas.

rata Kiri teks pada viewports berukuran LG (besar) atau yang lebih luas.

rata Kiri teks pada viewports berukuran XL (extra large) atau yang lebih luas.

Komentar (0)

Ini tiga kelas Bootstrap kelas tidak valid

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

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

 .text-left {
    text-align: left; }
Peter Mortensen
Jawaban edit 2 Juli 2019 в 9:17
Komentar (2)