2016-05-03 88 views
0

我正在使用Bootstrap的傳送帶。在桌面上,每張幻燈片都有3個div,其中包含文本,因此每張幻燈片都會顯示3個新文本框。在移動設備上,這很好,只有你可以看到每張幻燈片的第一個文本框。Bootstrap傳送帶,更改手機上的幻燈片內容?

如何更改幻燈片移動的距離以便看到每個文本框?目前滑塊滑動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> 

回答

0

如果它只是一個ResponsivDesign問題,我建議您到一些.COL-XX-XX類添加到您的股利。 如果您現在已經使用Bootstrap,但您可以擁有更好的結構,例如,您的文本框在移動設備上處於垂直位置,在桌面上處於水平位置。 看一看Bootstrap grid system

其他解決方案可能是製作兩個傳送帶,一個用於桌面,另一個用於移動。您將能夠自定義您想要的兩種方式。 第一個隱藏xs類(see bootstrap functionalities)及其3張幻燈片。 第二個隱藏md hidden-xx ...和3 * 3不同的幻燈片,例如。