为什么css底部不能在轮播中工作？

Question

我正在使用这个插件来创建轮播 https://www.npmjs.com/package/react-responsive-carousel

但我的药片显示在图像上。见电流输出（背景红色）。药丸在图像上

这是我的代码 https://codesandbox.io/s/react-responsive-carousel-forked-8c3x7s?file=/src/index.js

预期产出

我试过这样

.control-dots {
  background-color: red;
  position: absolute;
  bottom: 0;
}

还是行不通。预计将药丸移动到图像的底部而不是图像上方。

Answer 1

您需要将padding-bottom 添加到容器元素中：

.carousel.carousel-slider {
  padding-bottom: 30px;
}

.control-dots {
  background-color: red;
}

https://codesandbox.io/s/react-responsive-carousel-forked-ztfpeu?file=/src/index.css