Question

我们在bootstrap carousel项目中安排了一些div。请看这个

.item{
          padding:10%;
      }
      .inner{
          float:left;
          margin:10px;
          border:1px solid black;
          width:26%
      }
      .carousel-control{
          width:4%;
      }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <br>
  <div id="myCarousel" class="carousel" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
          <div class="inner"> 1</div>
          <div class="inner"> 2</div>
          <div class="inner"> 3</div>
      </div>

      <div class="item">
          <div class="inner">4</div>
          <div class="inner">5</div>
          <div class="inner">6</div>
      </div>
    
      <div class="item">
      
          <div class="inner">7</div>
          <div class="inner">8</div>
          <div class="inner">9</div>
      </div>

      <div class="item">
          <div class="inner">10</div>
          <div class="inner">11</div>
          <div class="inner">12</div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

当窗口调整为360px宽度时，div 3进入第一个轮播。但每次我们只需要显示一行项目在一个caurosel。即，当窗口调整为360px div 3显示在第一个旋转木马itme，但我们需要显示在第二个旋转木马项目。有没有办法做到这一点？

ie：每次我们需要在一个轮播中显示第一行div item，另一个内部div需要自动移动到下一个级别按照宽度。

Answer 1

bootstrap 3不支持此功能。所以使用猫头鹰旋转木马这有很酷的特色。

请参阅此链接：http://owlgraphic.com/owlcarousel/demos/images.html

按宽度排列Bootstrap Carousel项目。

1 个答案: