Есть ли в классах Twitter Bootstrap набор классов для выравнивания текста?
Например, у меня есть несколько таблиц с $ total, которые я хочу выровнять по правому краю...
<th class="align-right">Total</th>
а также
<td class="align-right">$1,000,000.00</td>
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>
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: left или 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)
Бутстрап 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. Эти классы и способы их использования могут быть изменены без уведомления.
Начальное выравнивание текста в версии 3.3.5:
<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>
Следующие строки кода работают правильно. Вы можете назначить классы, такие как 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-label и .price-value которые больше не нужны.
Я рекомендую 100% использовать пользовательский класс утилит под названием
.text-right {
text-align: right;
}
Мне нравится творить магию, но это зависит от вас, например:
span.pull-right {
float: none;
text-align: right;
}
Ой, с выпуском Bootstrap 3, вы можете использовать классы text-center для выравнивания по центру, text-left для выравнивания по левому краю, text-right для выравнивания по правому краю и выравнивание по text-justify для выравнивания по выравниванию.
Bootstrap - очень простая среда для работы с внешним интерфейсом, как только вы ее используете. А также очень легко настроить в соответствии с вашими предпочтениями.
Разбираясь с ответом Дэвида, я просто добавляю простой класс для увеличения Bootstrap следующим образом:
.money, .number {
text-align: right !important;
}
Вот короткий и приятный ответ с примером.
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>У нас есть пять классов для этого, от которых вы можете ссылаться: 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 недопустимый класс
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-left {
text-align: left; }
Если вы используете 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- [точка останова] - [выравнивание].