Question

我使用navbar fixed-top创建网站，然后滑块有h1和p标签没有图像，所以我给出了名为.item的幻灯片类并给出了这个类填充：400px 0;给我一个很好的标题，我使用大屏幕的整个滑块的背景图像属性都可以正常工作，但在较小的屏幕上我在h1和导航栏之间也获得了大的空间h1和旋转木马指示器i＆＃39; v搜索并尝试删除@media（最大宽度：750px）和@media（最大宽度：480px）上的填充和边距，但它没有工作，所以我怎么能丢失这个填充？

＆＃13;

@media (max-width:750px){
    
    #slider .container #mycarousel .carousel-inner .item{
        padding:0;
        margin:0;
    }
    
}

@media (max-width: 480px){
    #slider .container #mycarousel .carousel-inner .item{
        padding:0;
        margin:0;
        
    }
    
    
    
}

/* Slider */
#slide{
    
    background-image: url(../img/header.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    
}
.item{
    
    color:#fff;
    padding:400px 0;
}

＆＃13;

 <section id="slide" class="text-center">
       <div class="container">
           <div id="mycarousel" class="carousel slide" data-ride="carousel">
               <ol class="carousel-indicators">
                   <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                   <li data-target="#mycarousel" data-slide-to="1"></li>
                   <li data-target="#mycarousel" data-slide-to="2"></li>
               </ol>
               <div class="carousel-inner">
                   <div class="item active">
                       
                       <h1>Let's Make Business Look Better</h1>
                       <p>And The Shape Of Work Is Only The Stylish Shape</p>
                       <button type="button" class="btn btn-success">I Smell Success</button>
                       
                   </div>
                   <div class="item">
                       
                       <h1>Let's Make Business Look Better</h1>
                       <p>And The Shape Of Work Is Stylish</p>
                       <button type="button" class="btn btn-success">Take Me There</button>
                       
                   </div>
                   <div class="item">
                       
                       <h1>Let's Make Business Look Better</h1>
                       <p>And The Shape Of Work Is Stylish</p>
                       <button type="button" class="btn btn-success">Let's Do It</button>
                       
                   </div>
                   
                   
                   
               </div>
               
               
           </div>
           
           
       </div>
       
       
       
   </section>

＆＃13;

Answer 1

你有一个拼写错误，它应该是#slide而不是#slider，因此.item元素永远不会被定位。

@media (max-width:750px) {
    // this should be #slide, not #slider
    #slide .container #mycarousel .carousel-inner .item {
        padding:0;
        margin:0;
    }
}

@media (max-width: 480px) {
    // this should be #slide, not #slider
    #slide .container #mycarousel .carousel-inner .item {
        padding:0;
        margin:0;    
    }
}

希望这有帮助。

当尺寸较小时，从标题中删除填充

1 个答案: