Question

我正在使用Mobirise网站构建器，现在我试图找出如何使我的Bootstrap轮播变宽，如本示例中所示：https://mobirise.com/bootstrap-carousel/

我希望它位于顶部并仅覆盖屏幕的50-60％。

我尝试玩边距和填充，但是后来开始完全错误了。

这是我的全屏Bootstrap轮播的HTML代码：

<section class="carousel slide cid-r7XrvnwwpK" data-interval="false" id="slider1-3">

<div class="full-screen">
    <div class="mbr-slider slide carousel" data-pause="true" data-keyboard="false" data-ride="false" data-interval="false">
        <ol class="carousel-indicators">
            <li data-app-prevent-settings="" data-target="#slider1-3" class=" active" data-slide-to="0"></li>
            <li data-app-prevent-settings="" data-target="#slider1-3" data-slide-to="1"></li>
            <li data-app-prevent-settings="" data-target="#slider1-3" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item slider-fullscreen-image active" data-bg-video-slide="false" style="background-image: url(assets/images/1.jpg);">
                <div class="container container-slide">
                    <div class="image_wrapper">
                        <div class="mbr-overlay"></div><img src="assets/images/1.jpg">
                        <div class="carousel-caption justify-content-center">
                            <div class="col-10 align-center">
                                <h2 class="mbr-fonts-style display-1">FULL SCREEN SLIDER</h2>
                                <p class="lead mbr-text mbr-fonts-style display-5">Choose from the large selection of latest pre-made blocks - jumbotrons, hero images, parallax scrolling, video backgrounds, hamburger menu, sticky header and more.</p>
                                <div class="mbr-section-btn" buttons="0"><a class="btn btn-success display-4" href="https://mobirise.com">FOR WINDOWS</a> <a class="btn  btn-white-outline display-4" href="https://mobirise.com">FOR MAC</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item slider-fullscreen-image" data-bg-video-slide="https://www.youtube.com/watch?v=fwkKc6M60-0">
                <div class="mbr-overlay"></div>
                <div class="container container-slide">
                    <div class="image_wrapper"><img src="assets/images/2.jpg" style="opacity: 0;">
                        <div class="carousel-caption justify-content-center">
                            <div class="col-10 align-left">
                                <h2 class="mbr-fonts-style display-1">VIDEO SLIDE</h2>
                                <p class="lead mbr-text mbr-fonts-style display-5">Slide with youtube video background and color overlay. Title and text are aligned to the left.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><a data-app-prevent-settings="" class="carousel-control carousel-control-prev" role="button" data-slide="prev" href="#slider1-3"><span aria-hidden="true" class="mbri-left mbr-iconfont"></span><span class="sr-only">Previous</span></a><a data-app-prevent-settings="" class="carousel-control carousel-control-next" role="button" data-slide="next" href="#slider1-3"><span aria-hidden="true" class="mbri-right mbr-iconfont"></span><span class="sr-only">Next</span></a></div>
</div>

这是轮播滑块的CSS代码：

.cid-r7XrvnwwpK .full-screen .slider-fullscreen-image {
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.cid-r7XrvnwwpK .full-screen .slider-fullscreen-image.active {
  display: -o-flex;
}
.cid-r7XrvnwwpK .full-screen .container {
  width: auto;
  padding-right: 0;
  padding-left: 0;
}
.cid-r7XrvnwwpK .full-screen .carousel-item .container.container-slide {
  width: 100%;
  min-height: 100vh;
  padding: 0;
}

Answer 1

在carousel-inner上设置并设置最小高度和高度...

.carousel-inner {
    height: 50vh;
    min-height: 400px;
}

https://www.codeply.com/go/Ey68z7gocR

如何制作全角Bootstrap传送带滑块？

1 个答案: