Question

我是第一次开发一个网站，并且我用引导程序和CSS弄脏了。我正在使用自举旋转木马并使用带有2张幻灯片的基本旋转木马。但是我无法将幻灯片的高度设置为屏幕的高度。我尝试将旋转木马高度调整到100％，但它不能正常工作（延伸超出屏幕高度）。如果我给像素高度，如高度：500px;它工作正常。但我希望它适合整个scree。有关如何实现这一目标的任何帮助吗？

HTML：

<div class="container-fluid after-navbar">   
  <div class="container-fluid ">
    <div class="row row-content">
      <div class="col-xs-12">
        <div id="mycarousel" class="carousel slide carousel-height" data-ride="carousel">
          <ol class="carousel-indicators">
             <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
             <li data-target="#mycarousel" data-slide-to="1"></li>
          </ol>
          <div class="carousel-inner carousel-height" role="listbox">
            <div class="item active carousel-height">
              <%= image_tag("bg1.jpg", class: "img-responsive") %>
              <div class="carousel-caption">
                <h2>BLAH </h2>
              </div>                        
            </div>
            <div class="item">
              <a href="#"><%= image_tag("bg1.jpg", class: "img-responsive") %></a>
              <div class="carousel-caption">
                <h2>BLAH</h2>                        
              </div>
            </div>                    
          </div>
          <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>
      </div>
    </div> 
  </div>
</div>

CSS：

.carousel {
  background: $bgDefault;
}
.carousel .item {
  height: 100%;
}
.carousel .item img {
  left: 0;
  height: 100%;
  position: absolute;
  top: 0;
}

Answer 1

也许将旋转木马的高度设置为100％高度，然后在主体和html元素上添加100％的高度，这样就可以了：

.carousel{
   height:100%;
}
body, html{
   height:100%;
}

如果这不起作用，则可以添加：

.container-fluid.after-navbar{
    height:100%;
}

.row-content, .row-content > .col-xs-12{
    height:100%;
}

Bootstrap Carousel高度适合屏幕尺寸

1 个答案: