Html 调整另一个引导div内部的div的大小

我有一个div，它在滑块中显示一些产品，如下图所示：

调整屏幕大小后，媒体查询工作，内容重新排列：

当包含产品滑块的div位于bootstrap div col-lg-x内部时，就会出现问题。例如，一张在div.row>div.col-lg-8中发生的图片（图像被剪切，内容不会像调整屏幕大小时那样重新排列）：

div具有以下html：

#productSlider.MS content.item{
显示：内联块；
宽度：20%；
位置：相对位置；
垂直对齐：顶部；
溢出：隐藏；
身高：100%；
空白：正常；
}
@媒体屏幕和屏幕（最大宽度：1200px）{
#productSlider.MS content.item{
宽度：25%；
}
}
@媒体屏幕和屏幕（最大宽度：991px）{
#productSlider.MS content.item{
宽度：33.3333%；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
#productSlider.MS content.item{
宽度：50%；
}
}
@媒体屏幕和屏幕（最大宽度：575px）{
#productSlider.MS content.item{
宽度：100%；
}
.幻灯片标题{
字体大小：18px！重要；
利润率：30px 0 20px！重要；
}
}
img{
边框：1px纯黑；
}

---

只需从

#productSlider.MS content.item中删除
宽度：20%

  #productSlider .MS-content .item {
      display: inline-block;
       width:20%; /*remove this */
      position: relative;
      vertical-align: top;
      overflow: hidden;
      height: 100%;
      white-space: normal;
    }

并删除以下给定css：

@media screen and (max-width: 1200px) {
  #productSlider .MS-content .item {
    width: 25%;
  }
}

@media screen and (max-width: 991px) {
  #productSlider .MS-content .item {
    width: 33.3333%;
  }
}


#productSlider.MS content.item{
显示：内联块；
位置：相对位置；
垂直对齐：顶部；
溢出：隐藏；
身高：100%；
空白：正常；
}
@媒体屏幕和屏幕（最大宽度：768px）{
#productSlider.MS content.item{
宽度：50%；
}
}
@媒体屏幕和屏幕（最大宽度：575px）{
#productSlider.MS content.item{
宽度：100%；
}
.幻灯片标题{
字体大小：18px！重要；
利润率：30px 0 20px！重要；
}
}
.行{
保证金：0px！重要；
}

为什么要使用col-lg-8？不是我，是第三部分在使用他的网站上的滑块查看我的答案