Question

我正在使用bootstrap 3.3.0，并尝试实现如下截图所示。

我的版式所有部分都位于容器内部，但是只有一个部分需要位于容器外部，因此如何设置与其他部分的正确对齐方式

对于Slider，我使用的是猫头鹰传送带2.3.4（https://owlcarousel2.github.io/OwlCarousel2/）

这是我的代码HTML代码

<section class="client-testimonial">
    <div class="container-fluid">   
        <div class="row">
            <div class="col-sm-8">
                <!-- owl carousel start from here !-->  
                <div id="client-testimonialslider" class="owl-carousel owl-theme">
                    <div class="item">
                        <div class="client-testimonialslider-inner">
                            <div class="star">
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star-half-o"></span>
                            </div>

                            <div class="media">
                                <div class="media-left media-middle">
                                    <img src="<?=EXTERNAL_PATH?>v3/images/mobile-app-dev/photo.png" class="media-object" />
                                </div>
                                <div class="media-body">
                                    <h6 class="media-heading">Dhiviya Suryadevara</h6>
                                    <p>Chief Financial Officer</p>
                                </div>
                            </div>
                            <p>It`s a super team. You made a high quality product. I can`t wait to see the futur features.</p>
                        </div>
                    </div>
                    <!-- I am looping this item blog!--> 
                    <div class="item">
                        <div class="client-testimonialslider-inner">
                            <div class="star">
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star-half-o"></span>
                            </div>

                            <div class="media">
                                <div class="media-left media-middle">
                                    <img src="<?=EXTERNAL_PATH?>v3/images/mobile-app-dev/photo.png" class="media-object" />
                                </div>
                                <div class="media-body">
                                    <h6 class="media-heading">Dhiviya Suryadevara 2</h6>
                                    <p>Chief Financial Officer</p>
                                </div>
                            </div>
                            <p>It`s a super team. You made a high quality product. I can`t wait to see the futur features.</p>
                        </div>
                    </div>
                    <!-- item code end!-->

                </div>
                <!-- carousel end-->
            </div>
            <!-- right side text block!-->
            <div class="col-sm-4">
                <div class="innertext-content">
                    <h2 class="title">Client’s Testimonials <span>Feedback</span></h2>
                </div>
            </div>
            <!-- End right side text block!-->
        </div>
    </div>
</section>

.client-testimonial .owl-carousel.owl-drag .owl-item .item{padding: 5px;}
.client-testimonialslider-inner{padding: 15px;background: #FFFFFF;display: inline-block;width: 100%;box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);-webkit-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);-o-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);-moz-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);-ms-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);}
.client-testimonialslider-inner .star{float: right;margin-bottom: 9px;}
.client-testimonialslider-inner .star .fa{font-size: 11px;color: #F2C94C;}
.client-testimonialslider-inner .media-body{vertical-align: middle;}
.client-testimonialslider-inner .media-body .media-heading{font-size: 14px;line-height: 18px;font-weight: bold;}
.client-testimonialslider-inner .media-body p{font-family: Muli;font-weight: bold;font-size: 14px;line-height: 18px;color: #039CFD;margin: 0;}
.client-testimonialslider-inner p{margin: 34px 0 63px;}

这是owlCarousel代码，我们需要所有屏幕分辨率。

$('#client-testimonialslider').owlCarousel({
        loop:true,
        margin:30,
        nav:false,
        autowidth: true,
        responsive:{
           0:{
                items:1
            },
            600:{
                items:1
            },
            1000:{
                items:3
            },
            1200:{
                items:3
            },
            1400:{
                items:2
            },
            1600:{
                items:3
            },
            1800:{
                items:3
            }
        }
    });

请针对此问题分享一些最佳解决方案，以便它可以按照我的布局在所有分辨率下正常工作。

谢谢！

使用引导程序的猫头鹰传送带的问题（带有容器的容器流体）

0 个答案: