Question

当我想将我的轮播设置为col-xs-12时，我遇到了问题，实际上每个引导程序中的第12列都未正确设置为光滑的轮播。

如果我将它设置为col-xs-6它工作得很好，但我在一行中有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

我仍然试图围绕你的问题。以下是我必须提出的一些建议（希望如此）：

删除第一个包含所有内容的“col-md-12”。
将您的两列从<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">更改为<div class="col-md-12">

这是你要去的方向吗？你想做什么？

无法将光滑的轮播设置为列网格12 bootstrap

1 个答案: