Kann kein glattes Karussell auf Spaltenraster 12 setzen Bootstrap

Question

Ich habe ein Problem, wenn ich mein Karussell auf col-xs-12 setzen möchte, tatsächlich jede Spalte 12 im Bootstrap nicht richtig in glatte Karussell gesetzt.

Wenn ich es in col-xs-6 setze es funktioniert gut, aber ich habe 2 Gitter in einer Zeile. Ich brauche mehr Platz für mein Karussell. Fehle ich etwas?

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

dieses für Skript Slick

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

Answer 1

ich immer noch versuche ich meine Gedanken um Ihre Frage zu wickeln. Hier sind ein paar Vorschläge, die ich (hoffentlich) bekommen Sie, wo Sie gehen müssen:

1. Entfernen Sie die erste "Col-MD-12" Verpackung alles.
2. Ihre zwei Spalten aus <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> zu <div class="col-md-12">

Ist verändern die Richtung Sie suchen gehen? Was versuchst du zu machen?