slick carousel sütun ızgarası 12 önyükleme için ayarlanamıyor

Question

Döşememimi col-xs-12 olarak ayarlamak istediğimde sorun yaşıyorum, aslında önyükleme düzeninde düzgün bir şekilde ayarlanmamış her bir sütun 12.

col-xs-6'a ayarlıyorum, ancak iyi çalışır, ancak bir satırda 2 ızgaram var. Atlı karınca için daha fazla yere ihtiyacım var. bir şey mi özlüyorum

<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> 

Hala sorunuza etrafında fikrimi sarmak için çalışıyorum komut kaygan

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

Answer 1

için bu bir. İşte bir kaç önerilerim var (umarım) gitmeniz gereken yere varırız:

1. Her şeyi saran ilk "col-md-12" yi kaldırın.
<div class="col-md-12">

için <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> adresinin iki sütun bu gitmek aradığınız yön mı değiştirin

? Ne yapmaya çalışıyorsun?