Bootstrap正在标题中修复高度

Question

我是一名具有一定编码技能的设计师，但远非成为程序员。目前我在一个基于Bootstrap模板的网站上工作，做得很好，除了一个让我疯狂的问题：显然Bootstrap的CSS覆盖了网站CSS，在index.html标题中添加了一个固定的头，其中包含一个包含图像轮播的div。

在小型设备（平板电脑和手机）中显示网站，轮播使用“hidden-xs”和“hidden-xm”类正确隐藏，但标题保持固定高度929px，如Element Inspector所示，生成在下一节之前是一个非常高的空地。

您将在下面找到标题代码，包括轮播：

<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

Answer 1

尝试将其放入CSS文件

#intro {
  height: auto !important;
}

这应该覆盖默认的height像素。

如果你想拥有全屏图像，那么就这样写

#intro {
  height: 100vh !important;
}

希望这可以解决您的问题。