首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何制作一个全宽度的旋转木马滑块?

如何制作一个全宽度的旋转木马滑块?
EN

Stack Overflow用户
提问于 2018-10-30 11:24:39
回答 1查看 5.5K关注 0票数 0

我正在使用Mobirise,现在我试图了解如何使我的Bootstrap旋转木马像本例中所示的那样完全宽度:https://mobirise.com/bootstrap-carousel/

我希望它在顶部,只覆盖50-60%的屏幕。

我试着玩毛边和垫子,但后来它开始起作用了。

下面是我的全屏引导旋转木马的HTML代码:

代码语言:javascript
运行
复制
<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代码:

代码语言:javascript
运行
复制
.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;
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-10-30 11:46:45

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

代码语言:javascript
运行
复制
.carousel-inner {
    height: 50vh;
    min-height: 400px;
}

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53063253

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档