我正在使用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
}
}
});
请针对此问题分享一些最佳解决方案,以便它可以按照我的布局在所有分辨率下正常工作。
谢谢!