Bootstrap传送带，更改手机上的幻灯片内容？

Question

我正在使用Bootstrap的传送带。在桌面上，每张幻灯片都有3个div，其中包含文本，因此每张幻灯片都会显示3个新文本框。在移动设备上，这很好，只有你可以看到每张幻灯片的第一个文本框。

如何更改幻灯片移动的距离以便看到每个文本框？目前滑块滑动3次，但我需要在滑动时滑动9次。

提前致谢！

<div class="slider-section"> 
<div class="container"> 
    <div id="statistic-slider" class="carousel slide"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <div class="slider-text">Body text</div> 
       <div class="slider-text">Body text</div> 
       <div class="slider-text">Body text</div> 
      </div> 
      <div class="item"> 
       <div class="slider-text">Body text</div> 
       <div class="slider-text">Body text</div> 
       <div class="slider-text">Body text</div> 
      </div> 
      <div class="item"> 
       <div class="slider-text">Body text</div> 
       <div class="slider-text">Body text</div> 
       <div class="slider-text">Body text</div> 
      </div> 
     </div> 
     <a class="carousel-control left" href="#statistic-slider" data-slide="prev"></a> 
     <a class="carousel-control right" href="#statistic-slider" data-slide="next"></a> 
    </div> 
</div> 

Answer 1

如果它只是一个ResponsivDesign问题，我建议您到一些.COL-XX-XX类添加到您的股利。 如果您现在已经使用Bootstrap，但您可以拥有更好的结构，例如，您的文本框在移动设备上处于垂直位置，在桌面上处于水平位置。 看一看Bootstrap grid system。

其他解决方案可能是制作两个传送带，一个用于桌面，另一个用于移动。您将能够自定义您想要的两种方式。 第一个隐藏xs类（see bootstrap functionalities）及其3张幻灯片。 第二个隐藏md hidden-xx ...和3 * 3不同的幻灯片，例如。