我想要做的是使用bootstrap ui tabs组件并使其工作,以便在添加选项卡时,父div容器将扩展隐藏溢出的位置,并且选项卡不会垂直堆叠.当宽度超过容器宽度时,组件选项卡的ngRepeat渲染似乎强制垂直堆叠选项卡.除了该功能之外,我还希望在选项卡组件的左侧和右侧有按钮,以便滚动到溢出(隐藏)选项卡.
我这里有一个plunkr项目:
http://plnkr.co/edit/NybUxdTg8Ro7kIuUN5eZ?p=preview
有没有人知道如何阻止标签的垂直堆叠,只是让它们水平扩展并溢出(隐藏)并允许使用按钮导航到隐藏的标签?
我几乎要到了需要使用其他组件的地方.
你不能真正滚动浮动的项目.在这种情况下,您可以覆盖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.