Bootstrap - класс выравнивания текста для внутренней таблицы

576

Есть ли набор классов в Twitters Bootstrap Framework, который выравнивает текст?

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

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

и

<td class="align-right">$1,000,000.00</td>
  • 4
    <td class = 'text-right> text </ td> работает со мной
Теги:
text-align

19 ответов

1166
Лучший ответ

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>

Изображение 2310

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>

Изображение 2311

  • 25
    К сожалению, это не работает для ячеек таблицы. Это может быть просто проблема порядка CSS. Смотрите эту проблему [ github.com/twitter/bootstrap/issues/6837] . Должно быть исправлено в версии 3.0.
  • 25
    Я делаю <td> <div class = 'text-center'> bootin </ div> </ td>, чтобы обойти это.
Показать ещё 7 комментариев
60

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

<td class="text-right">
  text aligned
</td>
  • 0
    Вы также можете применить это ко всей строке: <tr class = "text-right"> <td> выравнивание текста </ td> </ tr>
41

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

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

В вашем случае, по вашему вопросу, похоже, что вы хотите, чтобы текст выравнивался справа в вашей таблице, но не все. Семантически, было бы лучше сделать что-то вроде (я просто собираюсь сделать несколько классов здесь, кроме класса начальной загрузки, таблицы):

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

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

  • 1
    и, кстати, я уверен, что вы можете добиться большего успеха с именами классов, чем я выбрал. но это был не акцент
  • 2
    Спасибо за это! Полностью получите свою точку зрения.
Показать ещё 2 комментария
31

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

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

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

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

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

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

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

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

22

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

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

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

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/

  • 1
    Да, я не хотел использовать встроенные стили для каждого элемента. Я знаю о тяге вправо, но я не хотел, чтобы элементы плавали. Я мог бы просто добавить класс, если его нет :)
15

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

  • 0
    Это застало меня врасплох, когда я читал документы Bootstrap 3 по установке Bootstrap 4. Спасибо за напоминание!
13

Выравнивание текста бутстрапа в версии 3.3.5.

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

Пример CodePen

11

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

Эта строка кода работает правильно. Вы можете назначить классы, такие как текстовый центр, слева или справа, текст будет соответствующим образом выровнен.

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

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

8

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

Я рекомендую переходить на 100% с помощью специального класса утилиты

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

Мне нравится делать какую-то магию, но это зависит от вас, как-то:

span.pull-right {
  float:none;
  text-align:right;
}
  • 1
    Да, каждый класс полностью "действителен", но он не семантический. Вы должны экономно использовать служебные классы в производственном коде, они предназначены для «начальной загрузки».
  • 3
    Потому что w3 говорит, что правильный способ использования выражений не означает, что он лучший. Пользовательский интерфейс jQuery и Bootstrap не существовали бы, если бы не «несемантические» классы. Люди склонны использовать семантическое значение для выражений, пока не поймут, что стремление к обобщению намного лучше во всех аспектах. Сначала трудно понять это или подумать, что это на самом деле хорошо, я шел по этой дороге ...
Показать ещё 2 комментария
5

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

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

4

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

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

У нас есть пять классов для этого, от которых вы можете ссылаться: 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>
1
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
Выровненный слева текст в видовых экранах размера MD (средний) или более широкий. Выровненный слева текст в видовых экранах размера LG (большой) или более широкий. Выровненный слева текст в видовых экранах размером XL (очень большой) или более широкий.
1

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

table{width: 100%;}
table td, table th{border: 1px solid #000;}
<script src="/jquery.min.js"></script>
<script src="/bootstrap.min.js"></script>
<link href="/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>
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 недопустимый класс

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

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

 .text-left {
    text-align: left; }
  • 4
    На этот вопрос уже есть несколько качественных ответов, большинство из которых были опубликованы три года назад, когда был задан вопрос. Хотя может быть полезным попытаться ответить на простые вопросы, подобные этому, чтобы расширить свои навыки программирования, публикация этого ответа в его текущем состоянии ничего не добавляет к вопросу. Если в вашем ответе есть что-то новое, пожалуйста, возьмите пару предложений, чтобы объяснить, чем он отличается и почему это делает его лучше.
-2

Если вы используете 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>

Утилиты Boostrap 4 знакомы в Bootstrap 3.x. Дифференциация в данный момент прерывается. По умолчанию точки останова: xs, sm, md, lg and xl,, поэтому эти классы выравнивания текста выглядят примерно так: .text- [breakpoint] - [alignnment]

  • 1
    Это был репост? Или что здесь произошло?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню