alvarotrigo.com/fullPage/和bootstrap 3网格问题

Question

我正在使用alvarotrigo.com/fullPage/获得漂亮的整页效果.我也在使用bootstrap 3网格系统,它看起来像:

<section id="section" class="section">
  <div class="home">
      <div class="container-fluid position-relative">
          <div class="row">
              <div class="col-sm-4">
              </div>
              <div class="col-sm-4">
              </div>
              <div class="col-sm-4">
              </div>
          </div>
      </div>
  </div>

现在,我们看到3列,全部都是封闭的,这个html创建了3个coluns视图,没关系.

但对于较小的视口,这三列,转换为3个全宽列,这是问题,因为全页,js现在跳过第二和第三列滚动,所以如果我滚动到#section,我只看到第一个div,如果我向下滚动,动画将转到另一个部分,跳过2和3 div.我创造了简单的插图.

div 2和div 3显示为灰色,表示在动画过程中将跳过这些div.

我的问题是,我可以在fullpage.js上进行设置或进行一些调整,因此脚本会在向下滚动后显示这些div吗？

谢谢.

Answer 1

我鼓励您使用某些responsiveWidth或responsiveHeight选项来关闭小屏幕设备上的自动滚动功能。

因此，你可以有这样的东西：

$('#fullpage').fullpage({
    responsiveWidth: 758
});

在线示例