Bootstrap 3 - 如何在特定设备上隐藏input-group-btn

Question

我想在超小型设备上查看时隐藏输入组-btn.实现这个目标的适当方法是什么？

我尝试过以下方法:

    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn hidden-xs">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div><!-- /btn-group --> 
    </div><!-- /input-group --> 

但它混淆了输入组http://bootply.com/81206的渲染

没有'hidden-xs':

使用'hidden-xs':

Answer 1

不幸的是， Bootstrap 3 不支持在 table-* 元素上使用响应式实用程序类：

响应式实用程序当前仅可用于块和表切换。目前不支持与内联元素和表格元素一起使用。

这些类在和.hidden-*之间切换一个元素，该元素会破坏您的布局，并使用表格显示值。我不确定这个问题的解决方法。display: block;display: none.input-group.input-btn-group