我正在使用 Mobirise Website Builder，现在我正在尝试了解如何使我的 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>
这是轮播 slider 的 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;
}
最佳答案
在 carousel-inner 上设置 min-height 和 height...
.carousel-inner {
height: 50vh;
min-height: 400px;
}
关于html - 如何制作全 Angular Bootstrap 轮播 slider ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53063253/