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固定头部高度

回答

相关问题