Дополнительно
Класс выравнивания текста внутри таблицы
Есть ли в фреймворке Twitter's Bootstrap набор классов, которые выравнивают текст?
Например, у меня есть несколько таблиц с итогами $
, которые я хочу выровнять вправо...
<th class="align-right">Total</th>
и
<td class="align-right">$1,000,000.00</td>
706
19
Bootstrap 3
v3 Text Alignment Docs
Bootstrap 4
v4 Text Alignment Docs
В Bootstrap 3.x использование
text-right
работает отлично:Нет, в Bootstrap нет класса для этого, но такой класс считается "утилитарным" классом, подобно классу ".pull-right", который упомянул @anton.
Если вы посмотрите на utilities.less, то увидите очень мало классов-утилит в Bootstrap, причина в том, что этот вид классов обычно не одобряется, и их рекомендуется использовать либо для: a) прототипирования и разработки - чтобы вы могли быстро создать свои страницы, а затем удалить классы pull-right и pull-left в пользу применения float к более семантичным классам или к самим элементам, либо b) когда это явно более практично, чем более семантическое решение.
В вашем случае, судя по вашему вопросу, вы хотите, чтобы определенный текст в вашей таблице был выровнен справа, но не весь. Семантически, было бы лучше сделать что-то вроде (я'просто собираюсь придумать несколько классов здесь, кроме класса по умолчанию bootstrap, .table):
И просто примените декларации
text-align: left
илиtext-align: right
к классам price-value и price-label (или любым другим классам, которые вам подходят).Проблема с применением
align-right
как класса заключается в том, что если вы захотите рефакторить свои таблицы, вам придется переделывать разметку и стили. Если вы используете семантические классы, вы можете обойтись рефакторингом только содержимого CSS. Кроме того, если вы тратите время на применение класса к элементу, то лучше всего попытаться присвоить этому классу семантическое значение, чтобы в разметке было легче ориентироваться другим программистам (или вам три месяца спустя).Можно рассуждать так: когда вы задаете вопрос "Для чего нужен этот td?", вы не получите разъяснений от ответа "align-right".
Начальной загрузки 2.3 и текст-слева служебные классы`
,
текст-справа " и " текст-центр, но они не работают в ячейках таблицы. До начальной загрузки 3.0 выпущен (где они исправили проблему) и я могу сделать выключатель, я добавил Это для моего сайта CSS, которые загружаются после загрузки.Усс
:Просто добавить, что "таможня" в таблицу стилей, которая загружается после загрузки´ы стилей. Так что определения классов перегружены.
В этой таблице стилей объявить выравнивание следующим образом:
Теперь вы сможете использовать в "общих" и конвенций выравнивания для TD и Th элементов.
Я думаю, потому что в CSS уже есть
text-align:right
, AFAIK, Bootstrap не имеет специального класса для этого.В Bootstrap есть "pull-right" для плавающих div'ов и т.д. справа.
Bootstrap 2.3 только что вышел и добавил стили выравнивания текста:
Bootstrap 2.3 выпущен (2013-02-07)
Предзагрузка 4 грядет! Утилиты классов ознакомлены в Bootstrap
3.х
сейчас брейк-поинт включен. Точки останова по умолчанию:хз
,см
,МД
,ЛГ
иХL
, так что эти текстовые классы выравнивания выглядеть.текст-[останова]-[alignnment]
.Важно: как я пишу эти строки, загрузочный 4 находится только в Альфа-2. Эти классы и как они'повторно использоваться могут быть изменены без предварительного уведомления.
Загрузочный выравнивание текста в В3.3.5:
Сайт CodePen пример
Следующие строки кода работают правильно. Можно назначить классы как текст-по центру, слева или справа, текст будет соответственно скорректировать.
Здесь нет'т необходимость создать любой внешний класс. Это загрузчик классов и имеют свою собственность.
Вы можете использовать этот CSS ниже:
Класс
.text-align
является абсолютно правильным и более удобным, чем.price-label
и.price-value
, которые больше не нужны.Я рекомендую на 100% использовать пользовательский класс утилиты под названием
Я люблю немного поколдовать, но это на ваше усмотрение, например:
Ой, с релиза Bootstrap 3, что вы можете использовать классы в <код>текст-центр на< код> По для выравнивание по центру, но <код>текст-слева на < код>По для выравнивание по левому краю, но <код>текст-право на< код> По для выравнивание по правому краю и <код>текст-оправдать</код> для выравнивание.
Bootstrap-это очень простая схема интерфейса для работы с, когда вы использовать его. А также очень легко настроить, чтобы соответствовать вашему вкусу.
Вот короткий и сладкий ответ с примером.
в
в
Расширение Дэвид'ы ответ, я просто добавить простой класс для увеличения загрузки такой:
У нас есть пять классов, что вы можете см. здесь: http://v4-alpha.getbootstrap.com/components/utilities/
в
в
Вот самое простое решение
Проверьте здесь: Демо
В Bootstrap версии 4. Есть некоторые встроенные классы для позиционирования текста.
Для центрирования заголовка таблицы и текстовые данные:
Вы также можете использовать эти классы в положение какого-либо текста.
Подробнее
Надеюсь, что это'ы помочь вам.
<Р=класса на"текст-МД-оставили">По левому краю текста на видовых размеров MD (средние) или шире.</п> <Р=класса"в тексте-ЛГ-оставили">По левому краю текста на видовых экранах размера LG (крупные) или шире.</п> <Р=класса"в тексте-ХL-оставили">По левому краю текста на видовых экранах размера XL (очень большой) или шире.</п>
В этих трех загрузочный класс неправильный класс