Bootstrap轮播使用CSS transform:scale属性时overflow:visible设置无效问题

解决方案 #

Bootstrap 轮播默认给 .carousel 和 .carousel-inner 两层父容器都设置了 overflow: hidden 属性，你仅给缩放的子项设置 overflow: visible 不会生效，需要修改父容器的溢出规则：

• 优先使用自定义类覆盖默认样式，避免全局污染：
  先给轮播根节点添加自定义类名，比如 custom-carousel，再添加以下 CSS：

  .custom-carousel,
  .custom-carousel .carousel-inner {
    overflow: visible;
  }
  

• 如果不想单独加类，也可以用 !important 强制覆盖默认样式：

  .carousel,
  .carousel-inner {
    overflow: visible !important;
  }
  

• 如果修改后仍存在内容裁剪，检查轮播外层的自定义父容器是否也设置了 overflow: hidden，同步修改为 visible 即可。
• 如果调整后出现轮播控制按钮、指示器被放大元素遮挡的问题，可给控件单独提升层级：

  .carousel-control-prev,
  .carousel-control-next,
  .carousel-indicators {
    z-index: 15;
  }
  

内容的提问来源于stack exchange，提问作者Iwalewa Fawaz