Bootstrap Media Queries

Используя следующий код в моем CSS стилей, чтобы настроить таргетинг JumboTron:Bootstrap Media Queries

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { 

    .jumbotron { 
     padding-top: 500px !important; 
     padding-bottom: 350px !important; 
     margin-bottom: 0; 
     background: url(../images/image.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 

}

Намерения просто увеличить верхние и нижние отступы моего JumboTron в мобильных дисплеях. Но этот код не влияет на мой jumbotron. Что я делаю не так?

Я попытался использовать только min-width и только max-width, в дополнение к использованию обоих с and, как в коде выше. Все трое не привели к изменениям.

источник

2016-10-24 Matt

Вы уже добавляли этот код в файл 'css' или файл' less'? '@ screen-sm-min' и' @ screen-sm-max' являются 'less' vars, поэтому вы не можете использовать их в' css'. – Seb33300

@media screen (min-width: @ screen-sm-min) и (max-width: @ screen-sm-max) {}, и убедитесь, что это менее/sass-файл, так как вы используете vars, t поддерживается стандартом css –

Я использую CSS - я не узнал SASS/LESS - есть ли какие-либо атрибуты, которые я могу использовать для достижения того же результата с помощью CSS? Спасибо, что указали это, Seb33300. – Matt

@screen-sm-min и @screen-sm-max - меньше, нет. Таким образом, вы должны указать реальные значения, если вы хотите использовать их в CSS:

@media (min-width: 768px) and (max-width: 991px) {

Но если вы хотите применить стиль CSS только на мобильных устройствах, правильный запрос информации должен быть:

@media (max-width: 767px) {

источник

2016-10-24 09:33:01 Seb33300

Я заменил свой тег '@ media' тем, что у вас здесь, и это также не повлияло на мой jumbotron. – Matt

Bootstrap Media Queries

ответ

Смежные вопросы