2016-07-09 13 views
1

ブートストラップカラムの幅に問題があります。 Owlのカルーセルなしではすべて正常に動作しますが、なぜこのプラグインで動作しないのか分かりません。 これは5つの同様のコードブロックです。すべてのブロックは.col-md-3クラスで始まります。 このコードの結果:ブートストラップ幅がOwlカルーセルと矛盾して表示される

enter image description here

\t $(document).ready(function() { 
 
     $(".team-members").owlCarousel({ 
 
\t \t \t autoPlay: 3000, 
 
\t \t \t items : 4, 
 
\t \t \t itemsDesktop : [1199,4], 
 
\t \t \t itemsDesktopSmall : [973,3] 
 
\t \t }); 
 
    });
\t <section id="team"> 
 
\t \t <div class="container"> 
 
\t \t \t <h4>Our team</h4> 
 
\t \t \t <div class="owl-carousel team-members"> 
 
\t \t \t \t <div class="col-md-3 col-sm-3"> 
 
\t \t \t \t \t <div class="member"> 
 
\t \t \t \t \t \t <div class="member-img"> 
 
\t \t \t \t \t \t \t <img src="img/man.png" alt=""> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="member-info"> 
 
\t \t \t \t \t \t \t <span>Jerry Mack</span> 
 
\t \t \t \t \t \t \t <i>Web-developer</i> 
 
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="member-contacts"> 
 
\t \t \t \t \t \t \t <i class="fa fa-facebook"></i> 
 
\t \t \t \t \t \t \t <i id="middle-icon" class="fa fa-twitter"></i> 
 
\t \t \t \t \t \t \t <i id="last-icon" class="fa fa-google-plus"></i> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-3 col-sm-3"> 
 
\t \t \t \t \t <div class="member"> 
 
\t \t \t \t \t \t <div class="member-img"> 
 
\t \t \t \t \t \t \t <img src="img/man.png" alt=""> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="member-info"> 
 
\t \t \t \t \t \t \t <span>Jerry Mack</span> 
 
\t \t \t \t \t \t \t <i>Web-developer</i> 
 
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="member-contacts"> 
 
\t \t \t \t \t \t \t <i class="fa fa-facebook"></i> 
 
\t \t \t \t \t \t \t <i id="middle-icon" class="fa fa-twitter"></i> 
 
\t \t \t \t \t \t \t <i id="last-icon" class="fa fa-google-plus"></i> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-3 col-sm-3"> 
 
\t \t \t \t \t <div class="member"> 
 
\t \t \t \t \t \t <div class="member-img"> 
 
\t \t \t \t \t \t \t <img src="img/man.png" alt=""> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="member-info"> 
 
\t \t \t \t \t \t \t <span>Jerry Mack</span> 
 
\t \t \t \t \t \t \t <i>Web-developer</i> 
 
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="member-contacts"> 
 
\t \t \t \t \t \t \t <i class="fa fa-facebook"></i> 
 
\t \t \t \t \t \t \t <i id="middle-icon" class="fa fa-twitter"></i> 
 
\t \t \t \t \t \t \t <i id="last-icon" class="fa fa-google-plus"></i> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-3 col-sm-3"> 
 
\t \t \t \t \t <div class="member"> 
 
\t \t \t \t \t \t <div class="member-img"> 
 
\t \t \t \t \t \t \t <img src="img/man.png" alt=""> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="member-info"> 
 
\t \t \t \t \t \t \t <span>Jerry Mack</span> 
 
\t \t \t \t \t \t \t <i>Web-developer</i> 
 
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="member-contacts"> 
 
\t \t \t \t \t \t \t <i class="fa fa-facebook"></i> 
 
\t \t \t \t \t \t \t <i id="middle-icon" class="fa fa-twitter"></i> 
 
\t \t \t \t \t \t \t <i id="last-icon" class="fa fa-google-plus"></i> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-3 col-sm-3"> 
 
\t \t \t \t \t <div class="member"> 
 
\t \t \t \t \t \t <div class="member-img"> 
 
\t \t \t \t \t \t \t <img src="img/man.png" alt=""> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="member-info"> 
 
\t \t \t \t \t \t \t <span>Jerry Mack</span> 
 
\t \t \t \t \t \t \t <i>Web-developer</i> 
 
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="member-contacts"> 
 
\t \t \t \t \t \t \t <i class="fa fa-facebook"></i> 
 
\t \t \t \t \t \t \t <i id="middle-icon" class="fa fa-twitter"></i> 
 
\t \t \t \t \t \t \t <i id="last-icon" class="fa fa-google-plus"></i> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </section>

このコードの結果: The result of this code

答えて

1

私は答えを見つけました。 Owlカルーセルは.owl-itemクラスのすべての要素をラップするので、.col-md-3は.owl-itemクラスの25%を意味します。 .col-md-3でdivにこのクラスを書くだけです。

<div class="owl-item col-md-3 col-sm-3"> 
 
\t <div class="member"> 
 
\t \t <div class="member-img"> 
 
\t \t \t <img src="img/man.png" alt=""> 
 
\t \t </div> 
 
\t \t <div class="member-info"> 
 
\t \t \t <span>Jerry Mack</span> 
 
\t \t \t <i>Web-developer</i> 
 
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p> 
 
\t \t </div> 
 
\t \t <div class="member-contacts"> 
 
\t \t \t <i class="fa fa-facebook"></i> 
 
\t \t \t <i id="middle-icon" class="fa fa-twitter"></i> 
 
\t \t \t <i id="last-icon" class="fa fa-google-plus"></i> 
 
\t \t </div> 
 
\t </div> 
 
</div>

: それはこのようなものでなければなりません
関連する問題