滑らかなカルーセルを列グリッド12のブートストラップに設定できない

Question

カルーセルをcol-xs-12に設定したいときに問題が発生しました。実際にはブートストラップのすべての列12が滑らかなカルーセルに正しく設定されていません。

col-xs-6に設定しても問題ありませんが、1つの行に2つのグリッドがあります。私は私のカルーセルのためのより多くのスペースが必要です。私は何かを欠いている？

<div class="col-md-12"> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
    <h3 class="mb-10">User Type</h3> 
    <div class="slider responsive"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <div class="statusbox mb-0"> 
      <h2>Independet Agent</h2> 
      <div class="statusbox-content"> 
       <strong>497</strong> 
       <span>Updated 27/04/2015</span> 
      </div> 
      <!-- /.statusbox-content --> 
      <div class="statusbox-actions"> 
       <a href="#"><i class="fa fa-eye"></i></a> 
       <a href="#"><i class="fa fa-bar-chart"></i></a> 
       <a href="#"><i class="fa fa-share-alt"></i></a> 
      </div> 
      <!-- /.statusbox-actions --> 
      </div> 
      <!-- /.statusbox --> 
     </div> 
     </div> 
     <!-- /.row --> 
     <div class="row"> 
     <div class="col-md-12"> 
      <div class="statusbox mb-0"> 
      <h2>Company Agent</h2> 
      <div class="statusbox-content"> 
       <strong>1.319</strong> 
       <span>Updated 27/04/2015</span> 
      </div> 
      <!-- /.statusbox-content --> 
      <div class="statusbox-actions"> 
       <a href="#"><i class="fa fa-eye"></i></a> 
       <a href="#"><i class="fa fa-bar-chart"></i></a> 
       <a href="#"><i class="fa fa-share-alt"></i></a> 
      </div> 
      <!-- /.statusbox-actions --> 
      </div> 
      <!-- /.statusbox --> 
     </div> 
     </div> 
     <!-- /.row --> 
    </div> 
    <!-- /.slider--> 
    </div> 
    <!-- /.col-* --> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
    <h3 class="mb-10">User Membership</h3> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="statusbox"> 
      <h2>Balance</h2> 
      <div class="statusbox-content"> 
      <strong>$25,000</strong> 
      <span>Updated 27/04/2015</span> 
      </div> 
      <!-- /.statusbox-content --> 
      <div class="statusbox-actions"> 
      <a href="#"><i class="fa fa-eye"></i></a> 
      <a href="#"><i class="fa fa-bar-chart"></i></a> 
      <a href="#"><i class="fa fa-share-alt"></i></a> 
      </div> 
      <!-- /.statusbox-actions --> 
     </div> 
     <!-- /.statusbox --> 
     </div> 
    </div> 
    <!-- /.row --> 
    </div> 
    <!-- /.col-* --> 
</div> 
<!-- /.row --> 
</div> 

スクリプトスリック

<script> 
$('.responsive').slick({ 
    dots: true, 
    infinite: false, 
    speed: 300, 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    responsive: [ 
    { 
     breakpoint: 1024, 
     settings: { 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     } 
    } 
    ] 
}); 

Answer 1

ため、この1私はまだあなたの質問の周りに私の心をラップしようとしています。

1. 「col-md-12」のすべてのラッピングを削除します。
は <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">から <div class="col-md-12">

にあなたの2つの列を変更

これは、あなたが行くために探している方向ですか？あなたは何をしようとしているのですか？