根据宽度排列引导轮播项目。答案

【问题标题】：Arrange Bootstrap Carousel item as per width .根据宽度排列引导轮播项目。
【发布时间】：2017-04-25 16:04:55
【问题描述】：

我们在引导轮播项目中安排了一些 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 进入第一个轮播。但是每次我们只需要显示一行项目在一个花椰菜中。即，当窗口调整为 360px 时，div 3 显示在第一个轮播项目中，但我们需要显示在第二个轮播项目中。有什么办法吗？

ie : 每次我们需要在一个轮播中显示第一行 div item , 其他内部 div 需要自动移动到下一级根据宽度。

【问题讨论】：

您是否使用 css 媒体查询来更改项目的宽度值？
是的。我正在使用 CSS 媒体查询

标签： javascript jquery twitter-bootstrap css

【解决方案1】：

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

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

【讨论】：

谢谢朋友。但我需要使用 jquery 修改内部项目。