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


724

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

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

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

а также

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

Ответы:


1412

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 3 пример выравнивания текста

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 4 пример выравнивания текста


29
Это не работает для ячеек таблицы, к сожалению. Это может быть просто проблема порядка CSS. Смотрите эту проблему [ github.com/twitter/bootstrap/issues/6837] . Должно быть исправлено в версии 3.0.
Дэвид

26
Я делаю <td> <div class = 'text-center'> bootin </ div> </ td>, чтобы обойти это.
Майкл Дж. Калкинс

3
Я хотел бы, чтобы bootstrap использовал точки останова с этим классом, такие как: text-right-md для выравнивания текста вправо только для среднего вверх.
Эрик Бишард

2
<p class = "text-left"> Выровненный по левому краю текст. </ p> <p class = "text-center"> Выровненный по центру текст. </ p> <p class = "text-right"> Выровненный по правому краю текст. </ p> <p class = "text-justify"> Оправданный текст. </ p> <p class = "text-nowrap"> Нет текста переноса. </ p>
user5026837

1
Странно, что я пытался использовать text-md-right (и xs & lg), но они не сработали. Я был в Codepen, так что, возможно, что-то с этим делать. В любом случае, этот ответ работал для меня. Спасибо!
Эдсон

76

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

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

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

46

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

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


1
и, кстати, я уверен, что вы можете добиться большего успеха с именами классов, чем я выбрал. но это не было акцентом
Jonschlinkert

3
В то время они этого не делали, а ИМО по-прежнему не должны.
Йоншлинкерт

34

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

26

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

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

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

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


23

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

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

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

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


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

15

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


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

12

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

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

Пример CodePen


11

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

8

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

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

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

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

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

1
Да, каждый класс полностью «действителен», но он не семантический. Вы должны экономно использовать служебные классы в рабочем коде, они предназначены для «начальной загрузки».
Jonschlinkert

3
Потому что w3 говорит, что правильный способ использования выражений не означает, что он лучший. Пользовательский интерфейс jQuery и Bootstrap не существовали бы, если бы не «не семантические» классы. Люди склонны использовать семантическое значение для выражений, пока не поймут, что стремление к обобщению намного лучше во всех аспектах. Поначалу трудно получить это или подумать, что это на самом деле хорошо, я шел по этой дороге ...
Барт Каликсто

1
Пользовательский интерфейс jQuery - плохой пример, потому что это библиотека javascript, которая также включает CSS, а Bootstrap, как я указал, использует служебные классы в качестве UTILITIES. Вы когда-нибудь задумывались о том, почему Bootstrap называется Bootstrap ? Так что вы можете использовать эти классы для разработки и изменить их в своем производственном коде. И я не сказал, чтобы вообще их не использовать, я использую pull-left, pull-right. И я также иногда использую текстовый центр. Но я использую их экономно, и я не рекомендую, чтобы другие использовали их по сравнению с лучшими, более семантическими вариантами.
Jonschlinkert

1
Пользовательский интерфейс jQuery был только примером. Подход, о котором я говорю, - это то, что заставляет библиотеки работать. Мы видим, как это делают кендо, светокопия, сетка, 960, пользовательский интерфейс Chico и даже сам Bootstrap. Это единственный способ, которым эти библиотеки могут существовать / работать. Вы можете взглянуть на крупные компании, как они используют CSS, такие как Apple ( images.apple.com/v/imac/a/styles/imac.css ), и вы будете впечатлены. Это объясняет производительность и огромное значение. Должен быть честным, я был поражен, я не нашел учебник, объясняющий это. Я думаю, что термин «самозагрузка» это потому, что это то, с чего нужно начинать, а не менять потом.
Барт Каликсто

7

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

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>


Являются ли HTML - теги linkи scriptдействует вне среды headили bodyтегов? Почему бы не предоставить полный и действительный пример документа HTML?
Питер Мортенсен

6

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

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

5

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

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


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>


3

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

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

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

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


1
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
Выровненный по левому краю текст на видовых экранах размером MD (средний) или шире.

Выровненный по левому краю текст в области просмотра размером LG (большой) или шире.

Выровненный по левому краю текст на видовых экранах размером XL (очень большой) или шире.


1

В 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

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

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

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

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

5
На этот вопрос уже есть несколько качественных ответов, большинство из которых были опубликованы три года назад, когда был задан вопрос. Хотя может быть полезным попытаться ответить на простые вопросы, подобные этому, чтобы расширить свои навыки программирования, публикация этого ответа в его текущем состоянии ничего не добавляет к вопросу. Если в вашем ответе есть что-то новое, пожалуйста, возьмите пару предложений, чтобы объяснить, чем он отличается и почему это делает его лучше.
MTCoster

Что вы подразумеваете под "В этом трех классах Bootstrap недопустимый класс" ? Можете ли вы уточнить? В частности, для «недопустимого класса» .
Питер Мортенсен

0

Использование 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>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.