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

Question

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

我这里有一个plunkr项目:

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

有没有人知道如何阻止标签的垂直堆叠,只是让它们水平扩展并溢出(隐藏)并允许使用按钮导航到隐藏的标签？

我几乎要到了需要使用其他组件的地方.

Answer 1

你不能真正滚动浮动的项目.在这种情况下,您可以覆盖Bootstraps样式,以便选项卡inline-block而不是浮动,然后您可以滚动.nav-tabs如下:

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

我不得不添加一些其他样式来使你的Plunkr工作,主要是因为按钮.你有你的按钮作为<ul>无效的孩子.我没有解决这个问题,但是我已将它们设置为绝对定位并建议您将它们从中取出<ul>.

这是一个更新的Plunnkr - 我的样式表是styles.css.