Question

我从HTML5 Boilerplate开始，然后添加了一个BootStrap Carousel。我们的想法是拥有一个标准模板，因此我可以调整客户的一些图像，并为响应式布局的自定义开始。我正试图缩小旋转木马底部的间隙，仍然将超大长度保持在标准高度。我很确定它来自.carousel-inner>.item {height: 20em;}我已经尝试将其更改为百分比无效，.carousel-inner>.item {height: 20%;}我不理解什么？

Main.CSS

.carousel-inner>.item {
    height: 20em;
}

.carousel-inner>.item img {
    height: auto;
    position: absolute;
    top: 0;
    /*
    transform: translateY(-50%);
    */
    width: 100%;
}

Index.HTML

<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>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">

            <picture>
                <source media="(max-width: 799px)" srcset="../img/Pressure_Wash_320.jpg">
                <source media="(min-width: 800px)" srcset="../img/Pressure_Wash.jpg">
                <img src="../img/Pressure_Wash.jpg" alt="Chris standing up holding his daughter Elva">
            </picture>
        </div>

        <div class="item">
            <img src="../img/Capture2.PNG" alt="Chicago">
        </div>

        <div class="item">
            <img src="../img/Capture3.PNG" alt="New York">
        </div>
    </div>

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


<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
    <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
    </div>
</div>

capture4

github/Carousel/issue 2

Answer 1

要解决移动设备上的问题，您需要执行以下操作（替换上面的样式）：

.carousel-inner > .item {
  height: auto;
}

@media only screen and (min-width: 768px) {
  .carousel-inner > .item {
    height: 20em;
  }

  .carousel-inner > .item img {
    height: auto;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

间隙的原因是因为旋转木马中的图像设置了max-width: 100%，但旋转木马项目本身具有固定的高度。缩小视口时，图像高度会小于轮播.item并在其下方留下间隙。

变通方法仅将.item高度应用于大于或等于768像素的视口，使较小的屏幕根据图像高度进行原始缩放。

与所有内容一样，对此有一些警告，可能需要根据您的最终规范进行调整。例如，将旋转木马中的所有图像调整为统一尺寸将是有益的，这样当您滚动它们时就不会有奇怪的跳跃。

Codepen示例： https://codepen.io/raptorkraine/pen/PJzeMp

其他

您可以相应地添加其他断点并相应调整.item类的高度，或者如果它适合您，则替换vh单位高度。

转盘下的差距

1 个答案: