jquery - 添加选项卡时，如何防止 Bootstrap UI 选项卡组件垂直堆叠，以致它们溢出容器的宽度？

Question

我想做的是使用 bootstrap ui 选项卡组件并使其工作，以便在添加选项卡时，父 div 容器只会扩展 overflow hidden 的位置，而选项卡不会 垂直堆叠。当宽度超过容器的宽度时，组件选项卡的 ngRepeat 渲染似乎会强制垂直堆叠选项卡。除了该功能之外，我还希望在选项卡组件的左侧和右侧有按钮，以允许滚动到溢出(隐藏)的选项卡。

我这里有一个 plunkr 元素:

http://plnkr.co/edit/NybUxdTg8Ro7kIuUN5eZ?p=preview

有没有人知道如何停止选项卡的垂直堆叠，让它们水平展开并溢出(隐藏)并允许使用按钮导航到隐藏的选项卡？

我几乎到了需要考虑使用另一个组件的地步。

Answer 1

You can't really scroll items that are floated .在这种情况下，您可以覆盖 Bootstraps 样式，以便选项卡为 inline-block而不是 float ，然后你可以滚动 .nav-tabs像这样:

.nav-tabs {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 46px;
}

我必须添加一些其他样式才能在您的 Plunkr 上运行，主要是因为按钮。您将按钮作为 <ul> 的子项这是无效的。我还没有解决这个问题，但我已经将它们设置为绝对定位并建议您将它们从 <ul> 中移除。 .

Here's an updated Plunnkr - 我的样式表是 styles.css。