html – 堆叠的bootstrap nav-tabs中的文本溢出

我正在尝试创建一个可以选择的水平标签列表,标签内容还有一个标签(堆叠)的附加列表,用于显示旁边标签的内容.

我创建了一个bootply here所以你可以看到我的意思.

每当调整大小为xs大小时,选项卡中的文本将为堆叠选项卡溢出,对于带有下拉列表的选项卡,下拉选项将与选项卡的大小不成比例

还没有找到一个体面的方式来解决它.有什么方法可以解决这个问题?考虑做媒体查询但不确定这是最好的路线.

最佳答案 在我的bootply中,我给了嵌套导航堆叠标签(在标签内容中)部分导航堆栈类与col-xs-3类.无论出于何种原因,这都会导致这些较小屏幕尺寸的问题.

删除导航堆叠类并使其只是常规导航nav-pills类工作并正确显示,因为由于列大小,每个选项卡都被推送到堆叠.没有文字溢出.

如果您仍希望它们堆叠,那么更大的屏幕尺寸呢?我只是做了一个hackish解决方案并设置col-xs-3 col-sm-2 col-md-1,所以它仍然强制标签堆叠.

已更新bootply

从md-sm切换的一个点(我认为)可能是xs-sm尺寸,标签再次水平显示.使用媒体查询轻松修复.

点赞