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

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

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

і

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

Завантаження 3

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>

Завантаження 4

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>

Використання Bootstrap 3.x з використанням text-rightвідмінно працює:

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

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

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

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

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

Один із способів подумати про це: якщо ви поставите запитання «Для чого це ТД?», Ви не отримаєте роз’яснення з відповіді «вирівняти-правильно».

Bootstrap 2.3 має утилітні класи text-left, text-rightі text-center, але вони не працюють у клітинках таблиці. Поки Bootstrap 3.0 не випущений (де вони вирішили проблему) і я не зможу зробити перемикання, я додав це до свого CSS сайту, який завантажується після bootstrap.css:

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

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

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

Просто додайте таблицю стилів, що завантажується після таблиці стилів Bootstrap. Отже визначення класів перевантажені.

У цій таблиці стилів оголошуйте вирівнювання наступним чином:

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

Тепер ви можете використовувати "загальні" умови вирівнювання для td і th елементів.

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

У Bootstrap є "тягнути вправо" для плаваючих дивів тощо. Праворуч.

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

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

Запуск Bootstrap 4 ! Класи корисних програм, знайомі в Bootstrap 3.x, тепер увімкнено. За замовчуванням Точки зупинки є: xs, sm, md, lgі xl, таким чином , ці класи вирівнювання тексту виглядати приблизно так .text-[breakpoint]-[alignnment].

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

Важливо: На момент написання цього запису Bootstrap 4 є лише в Альфа 2. Ці класи та спосіб їх використання можуть змінюватися без попереднього повідомлення.

Вирівнювання тексту завантажувальної програми у версії 3.3.5:

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

Приклад CodePen

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

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

Тут немає необхідності створювати будь-який зовнішній клас. Це класи Bootstrap і мають свою власність.

Ви можете використовувати цей CSS нижче:

.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-alignКлас повністю дійсний і зручніший , ніж мати .price-labelі .price-valueякі не потрібно більше.

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

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

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

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

Ось коротка і мила відповідь із прикладом.

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>

Розгортаючи відповідь Девіда , я просто додаю простий клас для збільшення Bootstrap таким чином:

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

Власне, з випуском Bootstrap 3 ви можете використовувати класи text-centerдля вирівнювання по центру, text-left для вирівнювання вліво, text-rightдля правого вирівнювання та text-justifyдля виправданого вирівнювання.

Як тільки ви користуєтесь, Bootstrap - це дуже проста рамка інтерфейсу, з якою можна працювати. Окрім того, що дуже легко налаштувати під свій смак.

Для цього у нас є п’ять класів, до яких ви можете посилатися тут: 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>

Ось найпростіше рішення

Ви можете призначити такі класи, як текстовий центр, зліва або справа. Текст відповідно буде відповідати цим класам. Не потрібно робити заняття окремо. Ці класи вбудовані в BootStrap 3

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

Перевірте тут: Демо

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

У Bootstrap версії 4. Є кілька вбудованих класів для розміщення тексту.

Для центрального заголовка таблиці та тексту даних:

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

Ви також можете використовувати ці класи для позиціонування будь-якого тексту.

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

Детальніше

Сподіваюся, це допоможе вам.

У цьому трьох класах Bootstrap недійсний клас

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

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

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

Використовуйте text-align:center !important. Можуть бути й інші text-alignправила css, тому !importantважливо.

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>