Bootstrap固定頭部高度

我是一位具有一定編程技能的設計師，但遠不是程序員。目前我正在一個基於Bootstrap模板的網站上工作，除了一個讓我瘋狂的問題外，做得足夠好：顯然，Bootstrap的CSS覆蓋了網站CSS，在index.html標題中添加了一個固定的頭部，其中包含一個包含圖像傳送帶的div。Bootstrap固定頭部高度

在小設備（平板電腦和手機）中顯示網站時，旋轉木馬使用「hidden-xs」和「hidden-xm」類正確隱藏，但是元素檢查器顯示的標題保持固定高度929px，在下一部分之前生成一個非常高的空白空間。

下面您可滿足頭部代碼，包括旋轉木馬：

<header id="intro"> 


<!-- CAROUSEL STARTS --> 
    <div id="myCarousel" class="carousel slide hidden-xs hidden-xm" data-ride="carousel" data-interval="2000" style="border:1px solid red;"> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 

    <div class="item active"> 
    <img class="d-block img-fluid" src="img/header-01.jpg" align="left" alt="Slide 01"> 
     <!-- <div class="carousel-caption"> 
     <p>El conocimiento es libertad</p> 
     </div> --> 
    </div> 

    <div class="item"> 
     <img class="d-block img-fluid" src="img/header-02.jpg" alt="Slide 02"> 
     <!-- <div class="carousel-caption"> 
     <p>El respeto a sí mismo</p> 
     </div> --> 
    </div> 

    <div class="item"> 
     <img class="d-block img-fluid" src="img/header-03.jpg" alt="Slide 03"> 
     <!-- <div class="carousel-caption"> 
     <p>El respeto a los demás</p> 
     </div> --> 
    </div> 

    <div class="item"> 
     <img class="d-block img-fluid" src="img/header-04.jpg" alt="Slide 04"> 
     <!-- <div class="carousel-caption"> 
     <p>Jardín - Primaria - Secundaria</p> 
     </div> --> 
    </div> 

    <div class="item"> 
     <img class="d-block img-fluid" src="img/header-05.jpg" alt="Slide 05"> 
     <!-- <div class="carousel-caption"> 
     <p>El conocimiento es libertad</p> 
     </div> --> 
    </div> 

    <div class="item"> 
     <img class="d-block img-fluid" src="img/header-06.jpg" alt="Slide 06"> 
     <!-- <div class="carousel-caption"> 
     <p>El respeto a sí mismo</p> 
     </div> --> 
    </div> 

    <!-- Wrapper for slides ENDS --> 

    </div> 

<!-- CAROUSEL ENDS --> 
</div> 

</header>

和一些截圖：

Home page full size (index.html)

Home page small devices width

來源

2017-10-08 Sergio Piccioli

嘗試把這個在您的CSS文件

#intro { 
    height: auto !important; 
}

這應該覆蓋默認height像素。

如果你想有全屏圖像，然後寫這樣

#intro { 
    height: 100vh !important; 
}

希望這會解決您的問題。

來源

2017-10-08 17:05:46

工作很好，非常感謝！我曾嘗試過，但沒有「！重要」行... –

現在我有另一個問題，下面的部分div「隱藏」部分位於導航欄下方，我該如何解決這個問題？ –

不客氣，請確認我的答案，以便如果有人遇到類似問題，可以找到解決方案。關於其他'div'，你需要學** CSS定位**，'margins'，'paddings'和'display'屬性。這些是在網頁上正確對齊元素的屬性。你可以在這裏http://cssreference.io/瞭解它們，或者你可以在freeCodeCamp或codecademy上學習它們，或者你可以在你的問題上發佈關於堆棧溢出的另一個問題。 –

Bootstrap固定頭部高度

回答

相關問題