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问题，我建议你在你的div中添加一些.col-xx-xx类。如果您现在已经使用了Bootstrap，但是，您将能够拥有更好的结构，例如，您的文本框在移动设备上具有垂直配置，在桌面设备中具有水平配置。看看Bootstrap grid system。

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

Bootstrap轮播，更改手机上的幻灯片内容？

1 个答案: