jumbotron和carousel padding

时间:2016-09-03 15:39:38

标签: jquery

我在主页上有一个旋转木马,而jumbotron类位于旋转木马下面。我为jumbotron提供了填充顶部。它反映了没有轮播的其他页面。它只发生在移动视图中。 要解决此问题,我将以下jquery代码放在.js文件中

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

但这适用于包括主页在内的所有页面。 任何人都可以给我解决方案吗?请给我......

2 个答案:

答案 0 :(得分: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
     }
}

答案 1 :(得分:0)

假设两个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,前提是.carousel类的div位于其前面。否则,padding-top: 280px;将应用于jumbotron。

如果divs是兄弟姐妹而不是直接依次使用general sibling css选择器:

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

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

这将影响900px及更低的屏幕尺寸(仅限移动设备)。您可以更改900px以满足您的需求。有关css3媒体查询的更多信息here

如果他们不是兄弟姐妹,请尝试Rahul Patel的答案。