在小屏幕上Bootstrap 3"btn-group"无响应行为

Question

有没有一个bootstrap 3方式来处理"btn-group"的小屏幕尺寸？

按钮组被放入<td>并包裹在<div class="btn-group">:

看起来没问题,直到你将其重新调整为<768px.然后你有:

如何使它们持久？我试着添加课程btn-group-justified.但它给出了全宽度按钮,并且在重新调整大小到小屏幕尺寸时看起来更糟糕.

PS>我有一个想法,如何实现它添加完整的自定义类.我的问题是关于bootstrap3方式.可能是我错过了什么.

Answer 1

您可以使用相同的按钮创建两个按钮组,并创建其中一个按钮组btn-group-vertical.然后在应用hidden-xs和之后visible-xs,您可以隐藏并在适当的屏幕尺寸上显示垂直组.

<div class="btn-group hidden-xs">
    <button class="btn btn-default">View</button>
    <button class="btn btn-default">Delete</button>
</div>
<div class="btn-group-vertical visible-xs">
    <button class="btn btn-default">View</button>
    <button class="btn btn-default">Delete</button>
</div>

不幸的是,这个要求重复了按钮的标记,但是如果你使用任何模板工具(定义标记一次并包含两次)它就不应该成为问题.

宽屏:

窄屏:

见JSFiddle.

Answer 2

我想为你提供一个带有FontAwesome图标的版本.使用最小屏幕分辨率文本隐藏只留下图标.

对不起我的英语不好.

<div class="btn-group">
    <button class="btn btn-default" title="View"><i class="fa fa-eye"></i><span class="hidden-xs"> View</span></button>
    <button class="btn btn-default" title="Delete"><i class="fa fa-times"></i><span class="hidden-xs"> Delete</span></button>
</div>  

由Vishal Kumar更新:添加GLYPHICONS预览

检查这个小提琴:http://jsfiddle.net/Jeen/w33GD/4/