Как использовать некоторые из мобильных первых классов начальной загрузки

Question

У меня проблемы с пониманием мобильного поведения начальной загрузки 4. Я всегда сначала проектировал рабочие столы и отошел оттуда.

Текстовое центрирование - одно из таких мест, где я не знаю, как действовать.

Например, я хочу, чтобы абзац центрировался на экранах размером менее 768 пикселей.

Итак, я посмотрел документацию https://getbootstrap.com/docs/4.0/utilities/text/, обнаружил класс text-md-center и подумал, что это то, что мне нужно. Он центрирует текст на экранах средней ширины, которые не превышают 768 пикселей.

Однако при использовании он сделал противоположное тому, что я думал - он центрировал текст для экрана размером больше 768 пикселей.

Я предполагаю, что это то, что называется «сначала мобильный». Разве это не значит для настольного первого дизайна? Как центрировать текст только на устройствах меньшей ширины?

Answer 1

Примените 2 класса к вашему абзацу: text-center и text-md-left.

text-center означает, что текст по умолчанию центрируется, тогда text-md-left означает, что он выровнен по левому краю на экранах шириной 768 пикселей и более.

Answer 2

Никогда не был фанатом фреймворков, таких как Twitter Bootstrap.

Во всяком случае, это в основном то, что он делает под капотом

@media screen and (min-width: 768px) {
    .text-md-center {
        text-align: center;
    }
}

Так что вы можете добавить свой собственный класс, как это.

@media screen and (max-width: 768px) {
    .mobile-text-center-md {
        text-align: center;
    }
}

Просто пример в любом случае.Затем используйте класс .mobile-text-center-md для центрирования текста на устройствах шириной менее 768px.