CSS：溢出-x：隐藏，溢出-y：在带有下拉菜单的轮播中可见答案

【问题标题】：CSS : Overflow-x: hidden, Overflow-y: visible in a carousel with dropdownCSS：溢出-x：隐藏，溢出-y：在带有下拉菜单的轮播中可见
【发布时间】：2017-12-07 23:59:54
【问题描述】：

这是我的问题。我有一个像菜单一样的旋转木马。当标签量高于浏览器上可用的宽度空间时，将出现旋转木马控件。一切正常。但是我还在每个选项卡上添加了一个下拉菜单，这就是问题所在。如果我把overflow:visible，我们可以看到tab滑入滑出div，非常难看。

如果我设置了溢出：隐藏，滑块可以正常工作，但是我再也看不到我的下拉菜单，因为它们也被垂直隐藏了。我试图把 overflow-y: visible 和 overflow-x:hidden 但这不起作用，因为如果“x”是可见的，如果“y”不同，它将被视为自动。换句话说，我的滑块可以工作，但是添加了一个滚动条来显示我的下拉菜单，这非常难看。

我在另一篇文章中看到将它包裹在一个更大的容器中，我只隐藏了“x”，而我的“y”将退回到更大的容器中。我不能这样做，因为如果不维护结构，我的旋转木马会损坏。

所以我的问题是：我怎样才能使我的滑块看起来不错（我们看不到标签滑入和滑出）以及显示我的下拉菜单！

如果您想查看此链接，请点击此处：https://decktogo.com/pages/downloads_user-manual_brochures

在大屏幕上，您不会看到任何错误。调整浏览器窗口的大小，使其宽度约为 380 像素。滑块将发挥作用，你会看到混乱。

如果您想要我的代码，可以右键单击并检查我的网站页面以查看那里的所有代码。

感谢您的帮助，乔纳森

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

问题解决了！不幸的是，它似乎没有一个好的答案。所以我做了一个溢出-x：隐藏，这样我的轮播就可以正常工作了。为了解决下拉问题，我放置了一个 height:400px 和 margin-bottom:-300px ，这使得最终的外观看起来很好。不幸的是，overflow-x 和 overflow-y 不能那样工作。

.download .carousel-inner.onebyone-carosel { 
  margin:0 40px;
  overflow-x:hidden;
  width: auto;
  height: 400px;
  margin-bottom:-300px;
  z-index: 4;
}

.download .carousel-inner{
  overflow: initial;
}

【讨论】：