Ответ 1

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>

Ответ 2

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

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

Ответ 3

Нет, 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: left или text-align: right к классам price-value и price-label (или любым другим классам, которые вам подходят).

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

Один из способов думать об этом таков: когда вы задаете вопрос "Для чего этот тд?", Вы не получите разъяснения от ответа "выровнять-вправо".

Ответ 4

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

Ответ 5

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

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

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

Теперь вы можете использовать "общие" соглашения о выравнивании для td и th элементов.

Ответ 6

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

Bootstrap имеет "тянуть-вправо" для плавающих div и т.д. Вправо.

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

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

Ответ 7

Бутстрап 4 идет! Классы служебных программ, которые были знакомы в Bootstrap 3.x, теперь включены в break-point. По умолчанию точки останова: 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. Эти классы и способы их использования могут быть изменены без уведомления.

Ответ 8

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

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

Пример CodePen

Ответ 9

Следующие строки кода работают правильно. Вы можете назначить классы, такие как 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 и имеют собственное свойство.

Ответ 10

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

Ответ 11

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

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

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

Мне нравится творить магию, но это зависит от вас, например:

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

Ответ 12

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

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

Ответ 13

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

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

Ответ 14

Вот короткий и приятный ответ с примером.

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>

Ответ 15

У нас есть пять классов для этого, от которых вы можете ссылаться: 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>

Ответ 16

Вот простейшее решение

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

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

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

Ответ 17

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

Ответ 18

В этом три класса Bootstrap недопустимый класс

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

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

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

Ответ 19

Если вы используете Bootstrap 3.x:

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

<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 4, знакомые в Bootstrap 3.x. Разница в том, что теперь точка останова включена. Точки останова по умолчанию: xs, sm, md, lg and xl, поэтому эти классы выравнивания текста выглядят примерно так: text- [точка останова] - [выравнивание].