Есть ли в класс Twitter Bootstrap набор классов для выравнивания текста?

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

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

а также

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

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

Bootstrap 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, причина в том, что этот класс обычно не одобряется, и его рекомендуется использовать для: а) прототипирования и разработки - так что вы можете быстро собрать из своих страниц, затем удалите классы pull-right и pull-left в пользу применения float к большему количеству семантических классов или к самим элементам, или b) когда это явно более практично, чем более семантическое решение.

В вашем случае, по вашему вопросу, похоже, что вы хотите, чтобы определенный текст был выровнен по правому краю таблицы, но не весь. Семантически было бы лучше сделать что-то вроде (я просто собираюсь составить несколько классов здесь, за исключением класса начальной загрузки по умолчанию, .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: leftor text-align: rightк классам price-value и price-label (или любым другим классам, которые вам подходят).

Проблема с применением 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 имеет «тянуть-вправо» для плавающих div и т. Д. Вправо.

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 присутствует только в Alpha 2. Эти классы и способы их использования могут быть изменены без предварительного уведомления.

Начальное выравнивание текста в версии 3.3.5:

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

Пример CodePen

Следующие строки кода работают правильно. Вы можете назначить классы, такие как text-center, left или right. Текст будет соответственно выровнен.

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