Question

如何将Carousel的高度设置为Full，我希望它在用户打开页面时占据屏幕，并且移动设备的行为相同。

当访问该网站时，carusel必须占据整个观看区域，不应该滚动Scrool来显示“我们的服务”文本。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <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>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

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

      <div class="item active">
        <img src="img\portfolio\concretobombeado.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="img\portfolio\limpeza.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="img\portfolio\limpeza.jpg"alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

      <div class="item">
        <img src="img\portfolio\limpeza.jpg" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Answer 1

与其他答案一样，您必须将#myCarousel的高度设置为100％。您可以做的另一件事可能有用，就是使用vh而不是像素这样的元素，例如文本。

根据你的形象，我判断你说葡萄牙语。所以，这里有一些关于CSS单元的帮助。 Unidades de CSS Moderno

这是W3C指南，explains the same但英文版。

PS：我会补充一下对pudi答案的评论，但我真的没有足够的声誉这样做。

Answer 2

你可以将它添加到你的css文件中。

 #myCarousel{
 height:100vh;
 width:100%;
 }

100vh会将您的carousal的高度设置为设备屏幕高度的100％。

这会将您的carousal的高度和宽度设置为占据整个屏幕。

在此之后，您可能还需要将.carousel-inner类的高度修改为100％。然后你可以相应地调整图像的宽度。

Answer 3

您必须将外部div的高度设置为id="myCarousel"为100％。所以将它添加到css文件或html文件中。使用您需要的全高度将<html>和<body>的高度设置为100％（通常是css文件中的前两个类）。

Answer 4

您必须使旋转木马图像及其任何容器100％高度。

html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
.carousel-inner>.item>img {
    height:100%;
}

Demo

将Bootstrap轮播调整到全高

4 个答案: