Gap under Carousel | 易学教程

问题

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?

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>

github/Carousel/issue 2

回答1:

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

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.

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.

Codepen example: https://codepen.io/raptorkraine/pen/PJzeMp

Additional

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.

来源：https://stackoverflow.com/questions/46334532/gap-under-carousel

标签

twitter-bootstrap

carousel