按每个宽度排列Bootstrap Carousel项目。 [英] Arrange Bootstrap Carousel item as per width .

问题描述

我们安排一些div的内部引导旋转木马项目。请参见

we arrange some div's inside bootstrap carousel item. Please see this

.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中，但是我们需要在第二个旋转木马项目中显示。有没有办法做到这一点？

when the window resize to 360px width then div 3 is come in first carousel. But every time we need to show only one row of item in one caurosel . ie, when window is resized to 360px div 3 is show in first carousel itme, but we need to show in second carousel item . Is there any way to do this ?

ie：每次我们需要在一个旋转木马中显示div的第一行
，另一个内部div需要根据宽度自动移动到下一个级别
。

ie : every time we need to show first row of div's in one carousel item , the other inner div need automatically move to the next level as per the width .

推荐答案

bootstrap 3不支持此功能。所以使用owl carousel这有凉爽的feautures。

bootstrap 3 does not supports this functionality. So use owl carousel this has cool feautures.

请参考这个链接： http://owlgraphic.com/owlcarousel/demos/images.html

这篇关于按每个宽度排列Bootstrap Carousel项目。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！