带缩略图的Bootstrap轮播在单排

这是我最后一个问题的扩展问题

当缩略图增加时，它会落入第2行。 如何使其溢出（ 不希望水平滚动缩略图 ）并与前/下一个按钮一起移动。

$('#myCarousel').carousel({ pause: true, interval: false }); // handles the carousel thumbnails $('[id^=carousel-selector-]').click( function(){ var id_selector = $(this).attr("id"); console.log(id_selector); // var id = id_selector.substr(id_selector.length -1); var parts = id_selector.split("-"); var id = parts[parts.length - 1] id = parseInt(id); $('#myCarousel').carousel(id); $('[id^=carousel-selector-]').removeClass('selected'); $(this).addClass('selected'); }); $('#myCarousel').bind('slide.bs.carousel', function (e) { var slideFrom = $(this).find('.active').index(); var videoContent = $('.item[data-slide-number='+slideFrom+'] .embed-responsive'); videoContent.html( videoContent.html() ); }); // when the carousel slides, auto update $('#myCarousel').on('slid.bs.carousel', function (e) { var id = $('.item.active').data('slide-number'); id = parseInt(id); $('[id^=carousel-selector-]').removeClass('selected'); $('[id=carousel-selector-'+id+']').addClass('selected'); }); 

DEMO