轮播下的差距 [英] Gap under Carousel

问题描述

我从HTML5 Boilerplate开始，然后添加了BootStrap Carousel。这个想法是要有一个标准的模板，这样我就可以调整来自客户的一些图像的大小，并为响应式布局在其定制方面打下坚实的基础。
我正在尝试缩小转盘底部的间隙，同时仍将超长距火箭保持在标准高度。我很确定它来自 .carousel-inner> .item {height：20em;} 我尝试将其更改为无用的百分比， .carousel-inner> .item {height：20％;} 我不明白什么？

I started with the HTML5 Boilerplate, then added a BootStrap Carousel. The idea is to have a standard template, so I can resize a few images from the customer and have a solid start on their customization for a responsive layout. I'm trying to close the gap at the bottom of the carousel and still keep the jumbotron at a standard height. I'm pretty sure it's coming from the .carousel-inner>.item {height: 20em;} I've tried changing this to a percentage to no avail, .carousel-inner>.item {height: 20%;} what am I not understanding?

主要.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>

github / Carousel / issue 2

推荐答案

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

To fix the issue on mobile you'll need to do the following (replacing your styles above):

.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%;
  }
}

出现间隙的原因是因为轮播设置了最大宽度：100％，但轮播项目本身具有固定的高度。当您缩小视口时，图像高度会变得小于轮播 .item 并在其下方留出空隙。

The reason for the gap is because the images in the carousel have max-width: 100% set but the carousel item itself has a fixed height. As you scale down the viewport, the image height gets smaller than the carousel .item and leaves a gap beneath it.

此变通办法仅将 .item 高度应用于大于或等于768px的视口，而使较小的屏幕根据图像高度在本地缩放。

The workaround applies the .item height only to viewports greater than or equal to 768px leaving the smaller screens to natively scale based on the image height.

与所有内容一样，有一些警告，可能需要根据您的最终规格进行调整。例如，将轮播中的所有图像调整为统一大小是有益的，这样在滚动时，您就不会出现怪异的跳跃。

As with everything, there are caveats to this and it may need tweaking based on your final spec. For example, it would be beneficial to resize all images in the carousel to a uniform size so that you don't have weird jumping as it scrolls through them.

代码笔示例： https://codepen.io/raptorkraine/pen/PJzeMp

其他

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

You can add additional breakpoints and adjust the height of the .item class accordingly or substitute for a vh unit height if it works better for you.

这篇关于轮播下的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！