Различное выравнивание для ноутбука и мобильного

Question

У меня есть следующий HTML в Angular2.

<div class="col-xs-12 col-lg-8" >
  <p style="font-size: 30px">
    {{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
  </p>
</div>

На мой взгляд, текст выровнен по левому краю (как я хотел).Как я могу сказать, что когда для col-xs-12 он должен быть центрирован?

Спасибо.

Answer 1

Хорошее объяснение медиазапросов Bootstrap 3 и 4 можно найти здесь: Точки останова Bootstrap 3 и медиазапросы .

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

Так что вы можете попробовать что-то вроде этого:

<div class="teacher-info col-xs-12 col-lg-8" >
    <p class="ta-xs-left" style="font-size: 30px">
        {{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
    </p>
</div>

<style>
// Default to center the paragraph to center
.teacher-info p {
    text-align:center;
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { 
    // When the screen is larger than a tablet, left align the text
    .ta-xs-left {
        text-align:left;
    }
}
</style>

Редактировать

В соответствии с ответом martinsoender, я согласен, что вы не должны ориентироваться на классы модификаторов и должны добавлять свои собственные классы.Это редактирование, чтобы показать, как я это сделаю.

По сути, я бы добавил класс к родителю для обозначения того, что содержит (сведения о преподавателе), а затем дал элемент, который я хочу изменить класс.В этом случае я создаю класс, который выглядит как класс начальной загрузки.ta-xs-left ({text-align} - {Xtra-Small} - {Alignment}), затем его можно использовать повторно везде, где это необходимо.

Answer 2

Лучшим подходом для этого было бы создание определенного класса для вашего контейнера и использование только медиазапросов для изменения позиции текста на мобильном телефоне.

Вот общая идея, следующая за BEM CSS именованием :

<style type="text/css">
.thing {
   ... some styles
}

.thing__title {
    text-align: center;
}

// tablets start at 768px width
@media (max-width: 767px) {
    .thing {
        ... some mobile styles
    }

    .thing__title {
        text-align: left;
    }
}
</style>

<div class="thing col-xs-12 col-lg-8">
    <p class="thing__title">... some text</p>
</div>

• Нет необходимости увеличивать время загрузки вашего сайта, добавляя jQuery для добавления стилей к элементу.
• Плохая идея нацеливаться на классы модификаторов из библиотек компонентов. Особенно ваша сетка, так как вы можете удалить ее, или имя класса может быть устаревшим в более поздних версиях, оставляя ваш сайт уязвимым.

Answer 3

Можете ли вы использовать JQuery?

$('.col-xs-12').css('text-align','center');