Клас вирівнювання тексту всередині таблиці

Чи є набір класів у фреймворку Bootstrap Twitter, який вирівнює текст?

Наприклад, у мене є кілька таблиць з підсумками $, які я хочу вирівняти по правому краю...

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

і

<td class="align-right">$1,000,000.00</td>
Rob
Edited question 3-го листопада 2019 в 7:09
Програмування
html css text-align twitter-bootstrap
10-го жовтня 2012 в 10:45
17 погляди

Ні, в Bootstrap для цього немає класу, але такий клас вважається "утилітою", подібно до класу ".pull-right", про який згадував @anton.

Якщо ви подивитеся на utilities.less, то побачите дуже мало утилітарних класів в Bootstrap, причина в тому, що цей вид класів в цілому не схвалюється, і їх рекомендується використовувати або для того, або для іншого: а) прототипування і розробки - щоб ви могли швидко створювати свої сторінки, а потім видалити класи pull-right і pull-left на користь застосування floats до більш семантичним класам або до самих елементів, або б) коли це явно практичніше, ніж більш семантичне рішення.

У вашому випадку, судячи з вашого запитання, ви хочете, щоб певний текст вирівнювався праворуч у вашій таблиці, але не весь. Семантично краще було б зробити щось на кшталт (я просто збираюся створити тут кілька класів, окрім стандартного класу 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>

І просто застосувати декларації text-align: left або text-align: right до класів price-value і price-label (або будь-яких інших класів, які працюють для вас).

Проблема із застосуванням align-right як класу полягає в тому, що якщо ви захочете рефакторити свої таблиці, вам доведеться переробити розмітку і стилі. Якщо ви використовуєте семантичні класи, ви можете обійтися рефакторингом тільки вмісту CSS. Крім того, якщо ви витрачаєте час на застосування класу до елемента, найкращою практикою буде спробувати присвоїти семантичне значення цьому класу, щоб іншим програмістам (або вам через три місяці) було легше орієнтуватися в розмітці.

Один із способів подумати про це такий: коли ви ставите питання &quo ;Для чого потрібен цей td?&quo ;, ви не отримаєте роз'яснення від відповіді &quo ;вирівняти по правому краю&quo ;.

Peter Mortensen
Edited answer 2-го липня 2019 в 7:39
Коментарі (4)

Думаю, тому що в CSS вже є text-align:right, AFAIK, Bootstrap не має спеціального класу для нього.

У Bootstrap є "pull-right" для плаваючих divs і т.д. вправо.

Щойно вийшов Bootstrap 2.3, в якому додали стилі вирівнювання тексту:

Випущено Bootstrap 2.3 (2013-02-07)

Peter Mortensen
Edited answer 2-го липня 2019 в 7:38
Коментарі (1)

Клас .text-align є цілком виправданим і більш корисним, ніж клас .price-label та .price-value, які вже не приносять ніякої користі.

Я рекомендую на 100% використовувати спеціальний утилітарний клас під назвою

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

Мені подобається робити деяку магію, але це залежить від вас, як щось:

span.pull-right {
  float: none;
  text-align: right;
}
Peter Mortensen
Edited answer 2-го липня 2019 в 9:09
Коментарі (4)