twitter-bootstrap - Bootstrap 3 - 特定のデバイスで input-group-btn を非表示にする方法

Question

超小型デバイスで表示するときに入力グループ ボタンを非表示にしたいと考えています。これを達成するための適切な方法は何ですか?

私は次のことを試しました：

    <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

残念ながら、table-* 要素でのレスポンシブ ユーティリティ クラスの使用は、Bootstrap 3 ではサポートされていません。

レスポンシブ ユーティリティは現在、ブロックとテーブルの切り替えでのみ使用できます。インラインおよびテーブル要素での使用は現在サポートされていません。

クラスは、 との間で.hidden-*要素を切り替えて、それ以降レイアウトを壊し、テーブル表示値を使用します。これに対する回避策がわかりません。display: block;display: none.input-group.input-btn-group