Как динамически стилизовать на основе текущей ширины столбца начальной загрузки

#css #bootstrap-4

#css #bootstrap-4

Вопрос:

Angular 6 и Bootstrap 4 . Ищу рекомендации по стилизации столбцов начальной загрузки на основе текущей ширины. Рассмотрим этот простой код:

 <div class="col-12 col-md-6" style="margin: 10px;" id="part1"></div>
<div class="col-12 col-md-6" style="margin: 10px;" id="part2"></div>
  

Когда окно просмотра имеет размер xs и каждая часть отображается во всю ширину, я хочу, чтобы поля были нулевыми. При просмотре на мониторе среднего и большего размера я хочу, чтобы поля были 10 пикселей. Как лучше всего это сделать?

Должен ли я использовать ngClass для вызова класса (.my-margin) на основе другого класса (col-md-6), потому что, похоже, я не могу заставить это работать правильно. Какая наилучшая практика, которую вы все считаете полезной?

ТИА и с днем горба.

Комментарии:

1. вы можете использовать медиа-запрос только для установки поля: 10 пикселей, если размер окна просмотра превышает определенный размер

2. Спасибо Крису. Я знаю об этом методе, но ищу более общую наилучшую практику для работы с различными точками останова col для стилизации. Я только что нашел руководство по разделению getbootstrap.com/docs/4.0/utilities/spacing это позволило бы мне добавить класс типа «ml-md-2», чтобы получить то, что я тоже хочу. В спешке при написании примера я неаккуратно написал поля вместо отступов для этой ситуации — поля привели бы к еще одному разрыву с тем, как я написал пример — извините за путаницу.