Можно ли при использовании bootstrap просто задавать margin?

Question

[Виктор Кокорич]

Дело в том, что я просто задаю кол-во колонок, я не делаю отступы колонками, а просто задаю margin. Дело дошло до адаптивности, и тут сетка помогает мне в том, что элементы при сужении ширины экрана становятся друг за другом, но не все. Тут слайдер почему то растянулся, а margin не перебивается медиа запросами, значит элемент наследует его откуда то. (скрин прикрепил) В общем можно ли делать как я делаю и почему марджин не перебивается медиа запросом? + слайдер сильно растягивается по высоте

Вот на всякий случай:

@media (max-width: 1200px)
                .slider
                      margin: 1px 1px

127.0.0.1:5500/src/index.html



P.S. Я только учусь, поэтому ошибки которые я делаю покажутся вам очень тупыми :)

Answer 1

[Талян]

чтобы узнать, какое свойство в CSS отвечает за отступ, нужно нажать в браузере F12, найти в DOM дереве интересующий элемент, и посмотреть все его свойства. Напротив каждого свойства, будь то ширина, цвет и т.д. указывается CSS файл, и его строка, в которой задано свойство.

И да,

127.0.0.1:5500/src/index.html

У меня свой 127.0.0.1, у вас свой. Ссылка не имеет смысла на ваш локалхост.

Еще можно указать в вашем случае

@media (max-width: 1200px)
         .slider
            margin: 1px 1px

Что это за запись?Скобки не нужны что ли?

@media (max-width: 1200px){
         .slider {
            margin: 1px 1px !important; // это очень моветон так делать, но зато работает
              }
}

Comments

[Виктор Кокорич]

Там sass

[Талян]

Виктор Кокорич, понял. В SASS не умею.

Answer 2

[ThunderCat]

В бутстрапе принято использовать мобайл фирст, то есть базовые стили на мобильный, а все что больше задаются в медиазапросах ниже основных стилей, для выбранных брекпоинтов, но от мин, а не от макс (@media (min-width: 1200px){...}). И пишутся стили по порядку - от меньших медиа размеров к бОльшим.