将 flexbox 布局与 angular-ui 选项卡一起使用 [英] Using flexbox layout with angular-ui tabs

问题描述

我不想使用带有角度 ui 选项卡 (ui.bootstrap.tabs) 的 flexbox 布局.我有这个 plunker:

I wan't to use flexbox layout with angular ui tabs (ui.bootstrap.tabs). I have this plunker:

http://plnkr.co/edit/9ToL1WLwgDVT0DldMnaa

我更改了 ui 模板，因此所有 div 都获得了 flexbox 类.标签内容 div 仍然没有填满完全可用的空间.

I changed the ui-template thus all div's get the flexbox classes. Still the tab content div is not filling up the fully available space.

有什么想法吗?

推荐答案

我找到了解决方案.这是一个更新的plunker:

I have found a solution. Here is an updated plunker:

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

关键是覆盖'.tab-content>.active'类的显示属性.默认情况下，它设置为显示:块".它必须设置为'display: flex'.

The key is to override the display property of the '.tab-content>.active' class. By default it is set to 'display: block'. It has to be set to 'display: flex'.

这篇关于将 flexbox 布局与 angular-ui 选项卡一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！