CSS: Адрес @media subclass

Question

Я хотел бы изменить следующие два стиля в классе @media. Я не могу найти подходящие классы. Подклассы .col-md меняют свою нумерацию по всему документу.

Я CSS noob и до сих пор не имел дело с классом @media (это даже «класс» из-за тега @?).
Я искал сайт, но я совсем потерялся, так как не знаю, как сформулировать мою проблему.

Каков правильный способ установки margin-left: 10% и width: 80%?

@media (min-width: 992px) 
.col-md-offset-3 { 
    margin-left: 25%; 
} 
@media (min-width: 992px) 
.col-md-6 { 
    width: 50%; 
} 

Answer 1

EDIT на основе комментариев:

Если то, что вы хотите, чтобы воздействовать на все .col-md не учитывая число, вы можете использовать attribute selector:

@media (min-width: 992px) { 
    [class*='col-md'] { 
     margin-left: 10%; 
     width: 80%; 
    } 
} 

В противном случае, если вы хотите воздействовать только на классы .col-md-6 & .col-md-offset-3 как вы включили вы можете:

@media (min-width: 992px) { 
    .col-md-offset-3 { 
     margin-left: 10%; 
    } 
    .col-md-6 { 
     width: 80%; 
    } 
} 

Это означает, что стили, применяемые в запросе @media, будет работать только на медиа видовых с минимальным width из 992px и выше.

Убедитесь, что вы установили их в конце своей таблицы стилей, которые должны быть загружены после стилей начальной загрузки.

You can find more info on @media querys here.

Answer 2

Смотрите, если это работает для вас:

@media (min-width: 992px) { 
    .col-md-offset-3 { 
    margin-left: 10%; 
    } 

    .col-md-6 { 
    width: 80%; 
    } 
}  

@media называется медиа-запросов. CSS, который должен применяться при выполнении условия, проходит между фигурными фигурными скобками после условия.

Answer 3

Используйте col-sm для размера брака между> = 768px и < 992px. Для напр.,

<div class="col-md-8 col-sm-10 col-md-offset-2 col-sm-offset-1"></div> 

В выше, например, Col-MD- * будет влиять только тогда, когда размер экрана> = 992px и < 1200, Col-SM- * при> = 768 и 992. Для < больше info.

Что касается медиа-запроса, это как точка останова. Для например.,

p { font-size: 16px; } 
@media screen and (max-width: 480px) { 
    p { font-size: 12px; } 
} 

В приведенном выше примере, р тег будет иметь размер шрифта в 12px только на размер экрана меньше, чем 480px. На всех остальных устройствах размер шрифта будет 16 пикселей. Для более info.