Twitter bootstrap 转盘下间隙

我从HTML5样板开始，然后添加了一个引导转盘。我们的想法是有一个标准模板，这样我就可以从客户那里调整一些图像的大小，并为他们的定制提供一个可靠的开始，以实现快速响应的布局。 我正在努力缩小传送带底部的间隙，同时仍将jumbotron保持在标准高度。我很确定它来自

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

你好，世界！
这是一个简单的营销或信息网站的模板。它包括一个称为jumbotron的大型标注和三个支持内容。把它作为一个起点来创造更独特的东西

---

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

产生间隙的原因是旋转木马中的图像设置了

最大宽度：100%

，但旋转木马项目本身具有固定的高度。缩小视口时，图像高度将小于旋转木马

.item

，并在其下方留下间隙

该解决方法仅将

.item

高度应用于大于或等于768px的视口，使较小的屏幕根据图像高度进行本机缩放

与所有内容一样，这也有一些注意事项，可能需要根据您的最终规格进行调整。例如，将旋转木马中的所有图像调整为统一的大小将是有益的，这样您就不会在滚动时出现奇怪的跳跃

代码笔示例：

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

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

附加的

---

您可以添加额外的断点，并相应地调整

.item

类的高度，或者替换

vh

单位高度（如果它更适合您）

您需要在此处发布造成问题的标记的最小示例，而不是明天可能更改或消失的第三方网站：不要在标记编辑器中发布卡住的内容。。我想我现在已经把它修好了，但是我不得不把它贴出来，以免丢失REST。我对

位置有点困惑：绝对的
。。。你想用它来完成什么？这来自同一个项目的前一个问题。。我愿意更改它，如果您认为这是导致问题的原因，我将尝试删除它。我想这是为了保持巨无霸的稳定。。我试着把它保持在一个标准的水平位置，而不是每次滑动都上下跳跃。