Question

我目前正在使用旋转木马在Bootstrap 3.0中创建一个网站。

在移动模式（xs）中，我在转盘中有4个项目，但当它达到平板电脑尺寸（sm或md）时，客户想要将其减少到只有2个项目而不是4个。

隐藏指标很容易，你可以使用hidden-sm来摆脱2个点，我还为项目本身添加了hidden-sm，但是控制旋转木马的JS忽略了这样一个事实：这些项目设置为display：none，无论如何都会滚动它们。

有没有人知道如何让Bootstrap忽略某些响应断点处的项目？

Answer 1

我遇到了类似的问题，但需要能够动态更改幻灯片的数量。为了简单起见，我选择以旋转木马指示器的可见性为基础。我在bootstrap.js内的变量声明之后添加了以下Carousel.prototype.slide()：

var $nextIndicator;
if (this.$indicators.length) {
  var iChildren = this.$indicators.children();
  var i=0; 
  while (($nextIndicator = $(iChildren[this.getItemIndex($next)])) && !$nextIndicator.is(':visible') && i<iChildren.length) {
    $next = $next[type]();
    if (!$next.length) {
      if (!this.options.wrap) return
      $next = this.$element.find('.item')[fallback]()
    }    
    i++; 
  }    
}

要删除幻灯片，我将以下内容放在我自己的代码中：

$indicatorsToRemove.hide();
// don't leave user on a page that got removed:
if ($indicatorsToRemove.filter('.active').length) {
  $('#carousel').carousel('next');
}

要添加它们：

$indicatorsToAdd.show();

减少用于移动设备的Bootstrap 3轮播中的项目数量

1 个答案: