代码之家 › 专栏 › 技术社区 › TurtleWolfe

转盘下的间隙

carousel twitter-bootstrap

-1

TurtleWolfe · 技术社区 · 7 年前

我从HTML5样板开始,然后添加了一个引导旋转木马。我们的想法是要有一个标准模板,这样我就可以从客户那里调整一些图像的大小,并为它们的定制打下坚实的基础,以实现快速响应的布局。 .carousel-inner>.item {height: 20em;} 我试着把它改成一个百分比,但没有用, .carousel-inner>.item {height: 20%;}

主要的CSS

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

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

<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

1 回复 | 直到 7 年前

Kieran McClung 7 年前

要解决移动设备上的问题,您需要执行以下操作(替换上面的样式):

.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 在下面留下一个缺口。

解决方法适用于 .项目 高度仅限于大于或等于768px的视口,较小的屏幕根据图像高度进行本机缩放。

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

附加的

您可以添加其他断点并调整 .项目 相应地分类或代替 vh 单位高度,如果它更适合你。