Класс выравнивания текста внутри таблицы

Есть ли в фреймворке Twitter's Bootstrap набор классов, которые выравнивают текст?

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

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

и

<td class="align-right">$1,000,000.00</td>
Комментарии к вопросу (1)
Решение

Bootstrap 3

v3 Text Alignment 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 Text Alignment 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>

Комментарии (9)

В Bootstrap 3.x использование text-right работает отлично:

<td class="text-right">
  text aligned
</td>
Комментарии (1)

Нет, в Bootstrap нет класса для этого, но такой класс считается "утилитарным" классом, подобно классу ".pull-right", который упомянул @anton.

Если вы посмотрите на utilities.less, то увидите очень мало классов-утилит в Bootstrap, причина в том, что этот вид классов обычно не одобряется, и их рекомендуется использовать либо для: a) прототипирования и разработки - чтобы вы могли быстро создать свои страницы, а затем удалить классы pull-right и pull-left в пользу применения float к более семантичным классам или к самим элементам, либо b) когда это явно более практично, чем более семантическое решение.

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

Можно рассуждать так: когда вы задаете вопрос "Для чего нужен этот td?", вы не получите разъяснений от ответа "align-right".

Комментарии (4)

Начальной загрузки 2.3 и текст-слева служебные классы`,текст-справа " и " текст-центр, но они не работают в ячейках таблицы. До начальной загрузки 3.0 выпущен (где они исправили проблему) и я могу сделать выключатель, я добавил Это для моего сайта CSS, которые загружаются после загрузки.Усс:

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

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

.text-left
{
    text-align: left !important;
}
Комментарии (0)

Просто добавить, что "таможня" в таблицу стилей, которая загружается после загрузки´ы стилей. Так что определения классов перегружены.

В этой таблице стилей объявить выравнивание следующим образом:

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

Теперь вы сможете использовать в "общих" и конвенций выравнивания для TD и Th элементов.

Комментарии (0)

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

В Bootstrap есть "pull-right" для плавающих div'ов и т.д. справа.

Bootstrap 2.3 только что вышел и добавил стили выравнивания текста:

Bootstrap 2.3 выпущен (2013-02-07)

Комментарии (1)

Предзагрузка 4 грядет! Утилиты классов ознакомлены в Bootstrap 3.х сейчас брейк-поинт включен. Точки останова по умолчанию: хз, см, МД, ЛГ и ХL, так что эти текстовые классы выравнивания выглядеть .текст-[останова]-[alignnment].

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

Важно: как я пишу эти строки, загрузочный 4 находится только в Альфа-2. Эти классы и как они'повторно использоваться могут быть изменены без предварительного уведомления.

Комментарии (1)

Загрузочный выравнивание текста в В3.3.5:

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

Сайт CodePen пример

Комментарии (0)

Следующие строки кода работают правильно. Можно назначить классы как текст-по центру, слева или справа, текст будет соответственно скорректировать.

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

Здесь нет'т необходимость создать любой внешний класс. Это загрузчик классов и имеют свою собственность.

Комментарии (0)

Вы можете использовать этот 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 */
Комментарии (0)

Класс .text-align является абсолютно правильным и более удобным, чем .price-label и .price-value, которые больше не нужны.

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

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

Я люблю немного поколдовать, но это на ваше усмотрение, например:

span.pull-right {
  float: none;
  text-align: right;
}
Комментарии (4)

Ой, с релиза Bootstrap 3, что вы можете использовать классы в <код>текст-центр на< код> По для выравнивание по центру, но <код>текст-слева на < код>По для выравнивание по левому краю, но <код>текст-право на< код> По для выравнивание по правому краю и <код>текст-оправдать</код> для выравнивание.

Bootstrap-это очень простая схема интерфейса для работы с, когда вы использовать его. А также очень легко настроить, чтобы соответствовать вашему вкусу.

Комментарии (0)

Вот короткий и сладкий ответ с примером.

в

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>

в

Комментарии (1)

Расширение Дэвид'ы ответ, я просто добавить простой класс для увеличения загрузки такой:

.money, .number {
    text-align: right !important;
}
Комментарии (0)

У нас есть пять классов, что вы можете см. здесь: 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>

в

Комментарии (0)

Вот самое простое решение

вы можете присвоить классы как текст-по центру, влево или вправо. Текст будет соответствующим образом корректировать на эти классы. Вам не обязательно делать занятия отдельно. Эти классы встроены в Bootstrap 3

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

Проверьте здесь: Демо

Комментарии (0)

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

Подробнее

Надеюсь, что это'ы помочь вам.

Комментарии (0)
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

<Р=класса на"текст-МД-оставили">По левому краю текста на видовых размеров MD (средние) или шире.</п> <Р=класса"в тексте-ЛГ-оставили">По левому краю текста на видовых экранах размера LG (крупные) или шире.</п> <Р=класса"в тексте-ХL-оставили">По левому краю текста на видовых экранах размера XL (очень большой) или шире.</п>

Комментарии (0)

В этих трех загрузочный класс неправильный класс

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

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

 .text-left {
    text-align: left; }
Комментарии (2)