ブートストラップがヘッダーの高さを固定しています

Question

私はプログラマーではなく、コーディングスキルを持つデザイナーです。現在、Bootstrapテンプレートに基づいたWebサイトで作業していますが、問題を除いて十分にうまくいきます。BootstrapのCSSがCSSを上書きして、index.htmlヘッダーに固定ヘッドを追加しています。画像カルーセルを含むdiv。

小型のデバイス（タブレットや携帯電話）でサイトを表示すると、「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

012 you'll以下

カルーセルを含む、ヘッダコードを見つけます

Answer 1

は、これがデフォルトheightピクセルをオーバーライドする必要がありますあなたのCSSファイルに

#intro { 
    height: auto !important; 
} 

これを入れてみてください。

あなたがフルスクリーンイメージを持つようにしたい場合は、この

#intro { 
    height: 100vh !important; 
} 

のように書くが、これはあなたの問題を修正願っています。