當尺寸較小時從頭部移除填充

Question

我使用navbar固定頂部的網站開始，然後滑塊有h1和p標籤沒有圖像，所以我給幻燈片類命名爲.item並給予此類填充：400px 0 ;給我一個很好的標題，我用大屏幕的整個滑塊的背景圖像屬性都可以正常工作，但在較小的屏幕上，我在h1和導航欄之間獲得了很大的空間，也在h1和旋轉木馬指示器之間搜索並試圖刪除@media（max-width：750px）和@media（max-width：480px）上的填充和邊距，但它沒有工作，所以我怎麼會損失這個填充？

@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; 
 
}

<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>

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;  
    } 
} 

希望這會有所幫助。