Question

:)我正在使用Bootstrap传送带，并正在寻找有效的解决方案。我想将较小的图像拉伸到用户的屏幕分辨率。已经有一些在线教程，但是其中任何一个都可以在当前版本的Bootstrap中使用。

我注意到在轮播淡入淡出效果期间，我的图像可以按照我需要的方式进行响应。我下载了Bootstrap源代码来查找特定行，但找不到此行。

有人可以告诉我如何复制这些效果以在轮播中获得响应图像吗？也许您对此有自己的解决方案？

 <div class="row inner-bg" id="slider-calosc">
        <div class="col-xs-12 text">
            <div id="slider" class="carousel slide carousel-fade" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#slider" data-slide-to="0" class="active"></li>
                    <li data-target="#slider" data-slide-to="1"></li>
                    <li data-target="#slider" data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active ">
                        <img class="img-fluid" src="slider1.jpg" alt="First slide">
                        <div class="d-block p-2 carousel-caption justify-content-center">
                            <h3>mytext</h3>
                            <p class="d-block p-2 podpisy-slider">mytext</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="img-fluid" src="slider2.jpg" alt="Second slide">
                        <div class="d-block p-2 carousel-caption  justify-content-center">
                            <h3>mytext</h3>
                            <p class="d-block p-2 podpisy-slider">Informatyka <span class="akcent">mytext</span></p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="img-fluid" src="slider3.jpg" alt="Third slide">
                        <div class="d-block p-2 carousel-caption justify-content-center">
                            <h3>mytext</h3>
                            <p class="d-block p-2 podpisy-slider">mytext</p>
                        </div>
                    </div>
                </div>

                <a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Poprzedni</span></a>

                <a class="carousel-control-next" href="#slider" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Następny</span></a>
            </div>
        </div>
    </div>

和CSS

.carousel-caption {
display: flex;
transform: translateY(-50%);
align-items: center;
top: 50%;
right: 0;
left: 0;
bottom: auto;
}
.carousel-item .img-fluid {
width: 100%;

}

.carousel-item a {
display: block;
width: 100%;
}
.podpisy-slider {

font-size: 3vw;
text-transform: uppercase;
font-weight: 800;

}

Bootstrap 4.1轮播淡入响应图像效果

0 个答案: