.row>[class*="col-"]
ищет любой class="col-
в прямом потомке .row
, ваш HTML не структурирован так. Поэтому удалите >
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
Или вы также можете установить .container [class*="col-"]
Вы должны использовать классы начальной загрузки для всех размеров экрана, если вы используете class="col-sm-8"
только для средних экранов, правильное использование:
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
</div>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
? Какая разница по сравнению с тем, как пишет сценарий бутстрапа: <meta name="viewport" content="width=device-width, initial-scale=1">
?
– MK-DK
13 July 2018 в 06:49
Почему вы не используете классы Bootstrap grid ? Тогда пользовательский CSS не требуется.
<div class="col-sm-12 col-md-12 col-xs-12">
</div>
JUST ADD !important
, если вы хотите применить одно и то же дополнение. также удалите >
из вашего CSS.
@media only screen and (max-width: 768px) {
.row {
margin-left: -5px !important;
margin-right: -5px !important;
}
.row [class*="col-"] {
padding-left: 5px !important;
padding-right: 5px !important;
}
}