web-dev-qa-db-ja.com

Twitter Bootstrap Responsive-デスクトップにのみテーブル列を表示

私はDataTables.net + Twitter Bootstrapとレスポンシブレイアウトを使用しています。私が試みているのは、列のみを表示する "visible-desktop"クラスを使用してテーブルの一部の列を非表示にすることです大きなサイズでは動作しませんが、うまく非表示になりますが、ウィンドウのサイズを変更してデスクトップの幅を取得すると、非表示の列が積み重なって表示され、CSSディスプレイクラスの問題のように見えます。これは、親からディスプレイのタイプを継承するためです。

.visible-desktop {
    display: inherit!important;
}

それを操作すると

.visible-desktop {
    display: table-cell!important;
}

うまくいきます...これの回避策はありますか？または、テーブルの列を非表示にするために独自のクラスを作成する必要がありますか？

twitter-bootstrapdatatableshidemultiple-columns
12
Santiago

私はついに回避策が存在することに気づきました：

visible-desktop

沿って

hidden-phone hidden-tablet

希望は誰かを助けます！

21
Santiago

バージョン4

編集：Bootstrap 4削除されたhiddenおよびvisibleクラス、更新された例については this answer を参照、および/または関連 公式の移行ガイド 。

** Bootstrap 3の下の古い回答**

バージョン3

.visibleおよび.hiddenで利用可能なクラス。

使用可能なクラスの1つまたは組み合わせを使用して、ビューポートのブレークポイント間でコンテンツを切り替えます。

bootstrap css html visible and hidden class grid

Bootstrapここのセクション http://getbootstrap.com/css/#sensitive-utilities-classes から

29
DeBraid

Boostrap 3.0では、公式ドキュメントに記載されているように、.visibilty-<size>または.hidden-<size>応答クラスを使用します。

http://getbootstrap.com/css/#responsive-utilities-classes

11
Joel AZEMAR