堆叠的bootstrap导航标签中的文本溢出

时间:2016-03-04 00:47:59

标签: html css twitter-bootstrap

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

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

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

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

1 个答案:

答案 0 :(得分:2)

在我的bootply中,我给了嵌套nav堆叠标签(在标签内容中)部分nav-stacked类,其类为col-xs-3。无论出于何种原因,这都会导致这些较小屏幕尺寸的问题。

删除nav-stacked类并将其保留为常规nav nav-pills类已正常显示,因为由于列大小较小,因此每个选项卡都会被推送以进行堆叠。没有文字溢出。

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

更新了bootply

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