jumbotron и пробел для карусели

Question

У меня есть карусель на домашней странице и класс jumbotron. Ниже этой карусели. Я даю прокладку для jumbotron. Он отражает другие страницы, не имеющие карусели. Это происходит только в мобильном режиме. Чтобы устранить эту проблему, я поставил следующий код JQuery в .js файл

if($(".body_content").hasClass(".carousel")){ 
    $(".jumbotron").css({"padding-top":"280px"}); 
} 
else{ 
    $(".jumbotron").css({"padding-top":"0px","margin-top":"-70px"}); 
} 

Но это работает на всех страницах, включая главную страницу. Может ли кто-нибудь дать мне решение? Пожалуйста, дайте мне ...

Answer 1

//Will check if "carousel" exist in page or not. 
if ($(".carousel").length) { 
    $(".jumbotron").addClass('home-jumbotron'); 
}else{ 
    $(".jumbotron").addClass('not-home-jumbotron'); 
} 

//Media query CSS (So it can be affected to mobile view only) 
@media screen and (max-width: 900px) { 
    .home-jumbotron { 
      padding-top: 280px; 
    }  
    .not-home-jumbotron { 
      padding-top: 0px; 
      margin-top:-70px 
    } 
} 

Answer 2

при условии, что оба divs являются sibilings и один за другим, вы можете использовать селектор direct sibiling CSS:

@media screen and (max-width: 900px) { 
    .jumbotron { 
      padding-top: 280px; 
    } 

    .carousel + .jumbotron { 
     padding-top: 0; 
     margin-top: -70px; 
    } 
} 

это относится padding-top: 0;margin-top: -70px; стили к .jumbotron, если перед ним стоит div с классом .carousel. в противном случае к jumbotron применяется .

если divs являются братьями и сестрами, но не непосредственно один после другого использования селектор CSS: general sibling

@media screen and (max-width: 900px) { 
    .jumbotron { 
      padding-top: 280px; 
    } 

    .carousel ~ .jumbotron { 
     padding-top: 0; 
     margin-top: -70px; 
    } 
} 

это будет влиять на экран размеры 900px и нижней (т.е. мобильные устройства только). вы можете изменить 900px в соответствии с вашими потребностями. подробнее о css3 медиа-запросах here.

если они не братья и сестры, попробуйте ответить Rahul Patel.