bootstrap轮播（carousel）图片竖着显示不能轮播的问题解决办法

之前总是出现这种问题，图片竖着显示并且不能左右轮播的问题。

后来发现出现这样的问题是。

  <!-- 轮播（Carousel）项目 -->
               <div class="carousel-inner" >
                  <div class="item active">
                     <img src="../../../web/images/testcar1.jpg" alt="正面照">
                     <div class="carousel-caption">正面照</div>
                  </div>
                  <div class="item">
                     <img src="../../../web/images/testcar2.jpg" alt="中控照">
                     <div class="carousel-caption">中控照</div>
                  </div>
                  <div class="item">
                     <img src="../../../web/images/testcar3.jpg" alt="后面照">
                     <div class="carousel-caption">后面照</div>
                  </div>
               </div>

必须有一个class是“item active”，如果都是“item”的话就会出现这样的问题。而对于我使用smarty模板的话，就要相信加一些逻辑判断了。

<!-- 轮播（Carousel）项目 -->
               <div class="carousel-inner" style="height:450px">
                {$index=0}
                {foreach $b as $c}
                  {if $index == 0}
                  <div class="item active">
                     <img src="{$c}_big.jpg">
                     <div class="carousel-caption"></div>
                  </div>
                  {else if}
                  <div class="item">
                     <img src="{$c}_big.jpg">
                     <div class="carousel-caption"></div>
                  </div>
                  {/if}
                  {$index=$index+1}
                {/foreach}
               </div>

版权声明：本文为博主原创文章，未经博主允许不得转载。