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

Question

是否有 bootstrap 3 方法来处理“btn-group”的小屏幕尺寸？

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

看起来不错，直到您将其大小调整为 <768 像素。那么你有:

如何让它们持久化？我试图添加类 btn-group-justified .但结果是它给出了全宽按钮，并且在调整到小屏幕尺寸时看起来更糟。

P.S> 我有一个想法，如何实现它添加全套自定义类。我的问题是关于 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>

不幸的是，这需要重复按钮的标记，但如果您使用任何模板工具(一次定义标记并包含两次标记)，这应该不是问题。

宽屏:

窄屏:

参见 the JSFiddle .