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不同的幻燈片，例如。