30

col-xsとのときにレスポンシブ デザインの列を非表示にしようとしていますcol-sm。最初にhidden-xs/hidden-smクラスを使用しようとしましたが、うまくいきませんでした。私もvisible-desktopここで述べたように使用してみました: Twitter Bootstrap Responsive - デスクトップでのみテーブル列を表示

それもうまくいきませんでした。これを行う最善の方法は何ですか？2 つの別々のテーブルを作成して、どちらか一方を非表示にするのではなく、

私が試したコードは現在機能していません:

<table>
    <thead>
        <th>Show All the time</th>
        <th class="hidden-xs hidden-sm">Hide in XS and SM</th>
    </thead>
    <tbody>
        <tr>
            <td>Show All the time</td>
            <td class="hidden-xs hidden-sm">Hide in XS and SM</td>
        </tr>
    </tbody>
</table>
4

3 に答える 3

19

受け入れられた回答には多くの賛成票があるため、以前は機能していたようhidden-xs/hidden-smですが、領域のサイズを変更しているときにフィドルの例が機能しません。私にとってうまくいくのは、を使用した反対のロジックvisible-md/visible-lgです。ドキュメントによると、Bootstrap はhidden-xs/hidden-smを引き続きサポートする必要があるため、理由がわかりません。

作業フィドル: http://jsfiddle.net/h1ep8b4f/ 

<table>
    <thead>
        <th>Show All the time</th>
        <th class="visible-md visible-lg">Hide in XS and SM</th>
    </thead>
    <tbody>
        <tr>
            <td>Show All the time</td>
            <td class="visible-md visible-lg">Hide in XS and SM</td>
        </tr>
    </tbody>
</table>
于 2016-08-10T09:00:59.190 に答える
16

コードは問題なく動作するはずです。Bootstrap は非表示/表示をサポートthしtd、応答性の高いユーティリティ クラスhttps://github.com/twbs/bootstrap/blob/master/less/mixins.less#L504を使用します。

// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
  display: block !important;
  tr& { display: table-row !important; }
  th&,
  td& { display: table-cell !important; }
}

.responsive-invisibility() {
  display: none !important;
  tr& { display: none !important; }
  th&,
  td& { display: none !important; }
}

コードはこの jsFiddle で動作します: http://jsfiddle.net/A4fQP/

于 2013-08-21T18:52:59.910 に答える